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

问题描述

我有一张这样的桌子:

<tr><td>示例文本</td></tr><tr><td>示例文本</td><td>示例文本</td></tr><tr><td>示例文本</td></tr><tr><td>示例文本</td><td>示例文本</td></tr>

我想仅使用 CSS 隐藏表格中的第二行和第三行.此表是预定义的，因此我无法使用 id 或 class 标签来指定要设置样式的行，我正在寻找一些针对特定行的解决方案.

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

解决方案

这是解决方案.>

HTML:

<tr><td>示例文本</td></tr><tr><td>示例文本</td><td>示例文本</td></tr><tr><td>示例文本</td></tr><tr><td>示例文本</td><td>示例文本</td></tr>

CSS:

table tr:nth-child(2) {display : none;}表 tr:nth-child(3) {显示:无；}

您必须使用 :nth-child() 来隐藏您想要的行.

由于大多数:nth-child() 不适用于旧浏览器，这里是 他们的解决方案.

HTML:

<tr><td>示例文本</td></tr><tr><td>示例文本</td><td>示例文本</td></tr><tr><td>示例文本</td></tr><tr><td>示例文本</td><td>示例文本</td></tr>

CSS:

table tr:FIRST-CHILD + tr {显示:无；}表 tr:FIRST-CHILD + tr + tr {显示:无；}

希望这对现在有所帮助.

I have a table as this one:

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

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.

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

解决方案

Here is the Solution.

The 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>

The CSS:

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

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

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

The 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>

The CSS:

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

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

Hope this helps now.

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