CSS of specific table row

问题

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.

回答1:

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.

回答2:

You can use :nth-child() selector:

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

回答3:

You can do it using CSS3 CSS

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

来源：https://stackoverflow.com/questions/16647221/css-of-specific-table-row

标签

css

html-table

css-tables

tablerow