Стиль: ошибки отображения и видимости?

Question

< table border="1" cellpadding="0" cellspacing="0" width="100%"> 
    < tr> 
     < td>1< /td> 
     < td>1< /td> 
     < td>1< /td> 
     < td>1< /td> 
     < td>1< /td> 
    </tr> 
    < tr style="display:block "> 
     < td>2< /td> 
     < td>2< /td> 
     < td>2< /td> 
     < td>2< /td> 
     < td>2< /td> 
    </ tr> 
    < tr style="visibility:hidden "> 
     < td>3< /td> 
     < td>3< /td> 
     < td>3< /td> 
     < td>3< /td> 
     < td>3< /td> 
    < /tr> 
    < tr style="visibility:hidden "> 
     < td>4< /td> 
     < td>4< /td> 
     < td>4< /td> 
     < td>4< /td> 
     < td>4< /td> 
    < /tr> 
    < tr> 
     < td>5< /td> 
     < td>5< /td> 
     < td>5< /td> 
     < td>5< /td> 
     < td>5< /td> 
    < /tr> 
    < tr> 
     < td>6< /td> 
    < /tr> 
    < tr> 
     < td>7< /td> 
    < /tr> 
< /table> 

увидеть код, я использую видимость и дисплей для скрытой или показывать строки, но оба имеют ошибки

Видимость скрыть строку, но не удалены пространство, как «дисплей: ни один»,
я могу использовать " дисплей ", но он не работает должным образом с сафари и Firefox.

Пожалуйста, дайте мне решение. Мои требования: -

Скрыть строку, а также удалить ее место во всех браузерах.

Answer 1

Изменить display: block; на display: table-row; для начала, затем используйте display: none; вместо visibility: hidden;.

display:block; применяется к элементам div и аналогичным, а не к строкам таблицы.

Answer 2

display: none отлично работает, чтобы удалить строку таблицы во всех браузерах.

Однако у вас есть display: block, что не имеет смысла. Элемент 'block' похож на <div>; вы не можете разумно поставить его прямо внутри <table>.

Строка таблицы, которая не удалена display: none, должна иметь отображаемое значение table-row. Однако только в IE, до версии 8, вместо этого это display: block. Это означает, что если вы переключаетесь между показанным и удаленным с помощью JavaScript, вам придется обнюхать браузер, чтобы выбрать, следует ли устанавливать display: table-row или display: block при повторном показе строки.

В этом случае гораздо проще сделать это косвенно, добавив и удалив row.className= 'hidden' и используя правило таблицы стилей до .hidden { display: none; }. Этот способ не требует обходных решений для браузера.

Answer 3

Это немного смутно, что вы после, но display:none скрывает строки и не экономит место на всех IE, FF и (насколько я знаю, но я не разрабатываю специально для Safari) Safari.

Answer 4

не используют

style="display:block" 

Также есть некоторые основные отсутствующий в вас код

таким образом, чтобы не использовать

< tr> 

должно быть

<tr> 

Использование colspan = "" в вашем

Число td в каждой строке должно соответствовать правильной работе. если они не совпадают, вы должны настроить его правильно, используя Colspan = «»

Ниже работа для меня

<table border="1" cellpadding="0" cellspacing="0" width="100%"> 
    <tr> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>2</td> 
     <td>2</td> 
     <td>2</td> 
     <td>2</td> 
    </tr> 
    <tr style="display:none"> 
     <td>3</td> 
     <td>3</td> 
     <td>3</td> 
     <td>3</td> 
     <td>3</td> 
    </tr> 
    <tr style="display:none "> 
     <td>4</td> 
     <td>4</td> 
     <td>4</td> 
     <td>4</td> 
     <td>4</td> 
    </tr> 
    <tr> 
     <td>5</td> 
     <td>5</td> 
     <td>5</td> 
     <td>5</td> 
     <td>5</td> 
    </tr> 
    <tr> 
     <td colspan="5">6</td> 
    </tr> 
    <tr> 
     <td colspan="5">7</td> 
    </tr> 
</table>