Question

我有一张桌子就像这样：

<table id="someID">
<tr><td>example text</td></tr>
<tr><td>example text</td><td>example text</td></tr>
<tr><td>example text</td></tr>
<tr><td>example text</td><td>example text</td></tr>
</table>

我想只使用CSS隐藏表中的第二行和第三行。这个表是预定义的，所以我不能使用id或class标签来指定要设置样式的行，我正在寻找一些针对特定行的解决方案。

如果可以用CSS完成，有人可以告诉我如何做到这一点。

Answer 1

以下是Solution.

HTML：

<table id="someID">
    <tr><td>example text</td></tr>
    <tr><td>example text</td><td>example text</td></tr>
    <tr><td>example text</td></tr>
    <tr><td>example text</td><td>example text</td></tr>
</table>

CSS：

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

您必须使用：nth-child（）来隐藏您想要的行。

由于大多数：nth-child（）不适用于旧浏览器，因此这里有Solution。

HTML：

<table id="someID">
    <tr><td>example text</td></tr>
    <tr><td>example text</td><td>example text</td></tr>
    <tr><td>example text</td></tr>
    <tr><td>example text</td><td>example text</td></tr>
</table>

CSS：

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

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

希望现在有所帮助。

Answer 2

您可以使用:nth-child()选择器：

http://www.w3schools.com/cssref/sel_nth-child.asp

Answer 3

您可以使用CSS3来完成 CSS

#someID tr:nth-child(2){display:none;}
#someID tr:nth-child(3){display:none;}

特定表行的CSS

3 个答案: