How to hide second row of a table using css?

Question

I have one table

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

To hide second row of table i am using following css

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

But not working in all browser. Please help me. Thanks in advance.

There is an answer: http://stackoverflow.com/questions/2751127/how-can-i-select-first-second-or-third-element-with-given-class-name-using-css — Mantas Vaitkūnas, Aug 03 '12 at 09:06

score 7 · Answer 1 · answered Aug 03 '12 at 09:06

7

Use the adjacency selector :

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

answered Aug 03 '12 at 09:06

ttzn

2,543
22
26

3

+1 For CSS 2.1 solution (IE 7+, cf. [When Can I Use...](http://caniuse.com/#search=first-)) – jensgram Aug 03 '12 at 09:09

score 5 · Accepted Answer · answered Aug 03 '12 at 09:05

5

:nth-child() simply doesn't work in all browsers (mainly IE), if you wish to hide the second row using CSS2, you could add a specific class:

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

answered Aug 03 '12 at 09:05

Curtis

101,612
66
270
352

As of Sep 2018, the link in this answer shows a largely-red chart as the upper half of the search results. You might instead want to look into [this link](https://caniuse.com/#feat=css-sel3) instead. – RayLuo Sep 15 '18 at 19:42

score 2 · Answer 3 · answered Aug 03 '12 at 09:06

The best way is to give it a class name.

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

and then

.hide_me { display: none; }

score 2 · Answer 4 · answered Aug 03 '12 at 09:21

2

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

Use Jquery eq(1) means, 0=> first row, 1 =>second row, 2=> third row ...etc

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

answered Aug 03 '12 at 09:21

Sumesh TG

440
1
4
15

score 0 · Answer 5 · answered Aug 03 '12 at 09:07

Unfortunately, selectors like :nth-child() aren't supported by old browsers.

But you can always use a class, e.g. .invisible {display:none} and apply it to the <tr> you want to hide.

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

How to hide second row of a table using css?

5 Answers5