CODEWITHSUNDEEP
htmlcsshtml-table
MirrorMirror
MirrorMirror

Reputation: 188

Hide table TR but keep TH displayed

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/

Upvotes: 0

Views: 232

Answers (6)

sufinsha
sufinsha

Reputation: 765

I think you can to hide the columns like this:

<style>
 .cTable td {
    display: none;
 }
 </style>

Upvotes: 0

Ragnarokkr
Ragnarokkr

Reputation: 2328

It's the HTML that's not correct. The correct way to define a table is using <thead> and <tbody>. Try this:

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

with this CSS:

.cTable tbody tr {
  display:none;
}

Upvotes: 1

Simone
Simone

Reputation: 21262

What about this?

.cTable td {
  display: none;
}

Hiding the cells instead of the rows should be enough. Also, you should wrap the th in a tr as already pointed by others.

Upvotes: 0

Jignesh Rajput
Jignesh Rajput

Reputation: 3558

you can try to use :first-child

css :

  cTable tr:not(:first-child){
           display:none;
  }

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>

its seem to work here: http://jsfiddle.net/vT4r9/14/

Upvotes: 1

Sowmya
Sowmya

Reputation: 26969

You should cover th with tr and change the css like

    .cTable tr td{ display: none; }

DEMO

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

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/

Upvotes: 2

Related Questions