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

【问题标题】：How to hide second row of a table using css?如何使用css隐藏表格的第二行？
【发布时间】：2012-08-01 07:38:13
【问题描述】：

我有一张桌子

<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;}

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

【问题讨论】：

有答案：stackoverflow.com/questions/2751127/…

标签： html css

【解决方案1】：

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

使用Jquery eq(1) 表示，0=> 第一行，1 => 第二行，2=> 第三行...等

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

【讨论】：

【解决方案2】：

很遗憾，像 :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>

【讨论】：

【解决方案3】：

使用邻接选择器：

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

【讨论】：

+1 适用于 CSS 2.1 解决方案（IE 7+，参见When Can I Use...）

【解决方案4】：

最好的方法是给它一个类名。

<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; }

【讨论】：

【解决方案5】：

: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;}

【讨论】：

截至 2018 年 9 月，此答案中的链接在搜索结果的上半部分显示了一个以红色为主的图表。您可能想改为查看this link。