Question

html code:

<table class='cTable'><th>Title</th>
<tr><td>Item1</td></tr>
<tr><td>Item2</td></tr>
<tr><td>Item3</td></tr>
</table>

CSS code:

.cTable tr {
    display: none;
}

This thing, not only hides the rows but also the head. Is there any way to avoid it?

I would like NOT to place a display: none; on each tr element if possible.

jsfiddle:

http://jsfiddle.net/vT4r9/1/

I tried this:

html

<table class='cTable'><th class='cTableTH'>Title</th>
<tr><td>Item1</td></tr>
<tr><td>Item2</td></tr>
<tr><td>Item3</td></tr>
</table>

CSS:

.cTable tr {
    display: none;
}

.cTableTH {
    display: block;
}

but doesn’t work either.

http://jsfiddle.net/vT4r9/4/

Answer 1

Your HTML is wrong. Change it this way:

HTML

<table class='cTable'>
<tr><th class='cTableTH'>Title</th></tr>
<tr><td>Item1</td></tr>
<tr><td>Item2</td></tr>
<tr><td>Item3</td></tr>
</table>

CSS

.cTable tr {
    display: none;
}

.cTable tr:first-child {
    display: table-row;
}

Explanation

Giving <th> directly inside <table> is wrong. Even if you give, it gets into <tr> and then it displays. Whatever you give to <th> inside the hidden <tr> doesn’t work.

Fiddle: http://jsfiddle.net/vT4r9/11/