Question

我有一张桌子

<table>
<tr><td>test data 1</td></tr>
<tr><td>test data 2</td></tr>
<tr><td>test data 3</td></tr>
<tr><td>test data 4</td></tr>
<tr><td>test data 5</td></tr>
</table>

要隐藏第二行表格，我正在使用以下css

 table tr:nth-child(2) {display : none;}

但不适用于所有浏览器。请帮我。提前谢谢。

Answer 1

:nth-child()只是doesn't work in all browsers（主要是IE），如果你想使用CSS2隐藏第二行，你可以添加一个特定的类：

<table>
<tr><td>test data 1</td></tr>
<tr class="row2"><td>test data 2</td></tr>
<tr><td>test data 3</td></tr>
<tr><td>test data 4</td></tr>
<tr><td>test data 5</td></tr>
</table>

 table tr.row2 {display : none;}

Answer 2

使用邻接选择器：

table tr:FIRST-CHILD + tr
{
    display:none;
}

Answer 3

最好的方法是给它一个班级名称。

<table>
<tr><td>test data 1</td></tr>
<tr class="hide_me"><td>test data 2</td></tr>
<tr><td>test data 3</td></tr>
<tr><td>test data 4</td></tr>
<tr><td>test data 5</td></tr>
</table>

然后

.hide_me { display: none; }

Answer 4

http://jsfiddle.net/p2b8H/1/

使用Jquery eq（1）表示，0 =＆gt;第一行，1 =＆gt;第二行，2 =＆gt;第三排......等等。

$(document).ready(function (){
    $('table tr:eq(1)').remove();
})

Answer 5

不幸的是，旧浏览器不支持:nth-child()等选择器。

但你总是可以使用一个类，例如.invisible {display:none}并将其应用于您要隐藏的<tr>。

<table>
<tr><td>test data 1</td></tr>
<tr class="invisible"><td>test data 2</td></tr>
<tr><td>test data 3</td></tr>
<tr><td>test data 4</td></tr>
<tr><td>test data 5</td></tr>
</table>

如何使用css隐藏表的第二行？

5 个答案: