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

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

0 голосов
/ 02 июня 2010 
< 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>

см. Код Я использую видимость и отображение для скрытых или отображаемых строк, но оба имеют ошибки

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

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

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

Ответы [ 4 ]

6 голосов
/ 02 июня 2010

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

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

5 голосов
/ 02 июня 2010

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; }. Этот способ не требует обхода браузера.

2 голосов
/ 02 июня 2010

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

style="display:block"

Также в вашем коде отсутствуют некоторые основные

такие, что не используйте 

< tr>

должно быть 

<tr>

Используйте colspan = "" в вашем

Количество тд в каждой строке должно соответствовать, чтобы работать должным образом.если они не совпадают, вы должны отрегулировать его правильно, используя 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>
0 голосов
/ 02 июня 2010

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

...