特定表行的CSS [英] CSS of specific table row

问题描述

我有一张这样的表：

<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标签来指定要设置样式的行，我正在寻找一些针对特定行的解决方案。

And I want to hide the second and the third row in the table using only CSS. This table is predefined so I cannot use id or class tags to specify which row to style, I'm looking for some solution that targets the specific rows.

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

If this can be done with CSS can someone tell me how to do this.

推荐答案

以下是解决方案。

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（）来隐藏您想要的行。

You have to use :nth-child() to hide the rows that you desire.

由于大多数：nth-​​child（）不适用于旧浏览器，这里是解决方案。

As most of the :nth-child() will not work for older browsers, here is the Solution for them.

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

希望现在有所帮助。

这篇关于特定表行的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！