CSS to hide table and show a tr

Question

I wanted to hide a table on load and show one of its children td based on class name. Is it possible to do it with CSS?

I tried to do it but I think its inheriting from table which is hidden by display:none;

the title says show hide a tr and yet you explicitly ask about showing a td ... — AlxVallejo, Mar 16 '17 at 21:31

score 9 · Answer 1 · answered Oct 25 '12 at 20:01

9

If you hide the table, all of the content within the table will be hidden.

You want to hide all the <tr>s and only show per class

tr{
  display:none;
}
tr.showInit{
  display:table-row;
}

answered Oct 25 '12 at 20:01

DACrosby

11,116
3
39
51

1

lost half an hour because i used `display:block` instead of `display:table-row` you have a grateful dev on the other side of the ocean (: – microspino Aug 25 '16 at 14:41
1

Ditto on @microspino. – jason Sep 13 '21 at 16:34

score 5 · Answer 2 · edited May 23 '17 at 11:53

You can't show a child of a hidden parent.

However you can hide all the other <td>-s and show just the one you need.

<style>
td { display: none }
td.shown { display: table-cell }
</style>

<table>
    <tr>
        <td> hidden </td>
        <td> hidden </td>
    </tr>
    <tr>
        <td class="shown"> shown </td>
        <td> hidden </td>
    </tr>
    <tr>
        <td> hidden </td>
        <td> hidden </td>
    </tr>
</table>

DEMO

UPDATE

Using JavaScript

var tds = document.getElementsByTagName("td");

for ( var i = 0, size = tds.length; i < size; i++ ) {
    if ( !hasClass( tds[i], "shown" ) ) {
        tds[i].style.display = "none";
    }
}

function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

DEMO

hasClass() function

Is it possible via JavaScript? – user1376366 Oct 25 '12 at 20:58 — user1376366, Oct 25 '12 at 20:58

score 1 · Answer 3 · answered Oct 25 '12 at 19:59

1

You cannot show the child and hide a parent .. That is not possible.

Instead hide all the td's you don't want to show ..

answered Oct 25 '12 at 19:59

Sushanth --

55,259
9
66
105

CSS to hide table and show a tr

3 Answers3