How to hide a row header without affecting alignment

Question

I have added an empty TR in a top of a table just to align correctly the tds below, but when i print the table this tr is visible with a small height :

<table>
<tr>
    <td style="width: 10%;"></td>
    <td style="width: 40%;"></td>
    <td style="width: 16%;"></td>
    <td style="width: 10%;"></td>
    <td style="width: 7%;"></td>
    <td style="width: 7%;"></td>
    <td style="width: 10%;"></td>
</tr>
<tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>E</td>
    <td>F</td>
    <td>G</td>
    <td>H</td>
</tr>
<tr>
...
</tr>
...
</table>

I have tried to change the height to 0 but it doesn't work, can you please tell the best way to hide it totally without affecting the tds below.

Thanks a lot for your help

ellipsis · Answer 1 · 2019-02-18T10:47:25.713

Use visibility:collapse. It will hide the tr while keeping the widths

Without visibility:collapse

#head
{
background-color:blue;


}

<table>
<tr id="head">
    <td style="width: 10%;"></td>
    <td style="width: 40%;"></td>
    <td style="width: 16%;"></td>
    <td style="width: 10%;"></td>
    <td style="width: 7%;"></td>
    <td style="width: 7%;"></td>
    <td style="width: 10%;"></td>
</tr>
<tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>E</td>
    <td>F</td>
    <td>G</td>
    <td>H</td>
</tr>
<tr>
...
</tr>
...
</table>

With visibility:collapse

#head
{
background-color:blue;
visibility: collapse;

}

<table>
<tr id="head">
    <td style="width: 10%;"></td>
    <td style="width: 40%;"></td>
    <td style="width: 16%;"></td>
    <td style="width: 10%;"></td>
    <td style="width: 7%;"></td>
    <td style="width: 7%;"></td>
    <td style="width: 10%;"></td>
</tr>
<tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>E</td>
    <td>F</td>
    <td>G</td>
    <td>H</td>
</tr>
<tr>
...
</tr>
...
</table>

It is working in the snippet just fine. Are you sure you are using it the right way?? — ellipsis, Feb 18 '19 at 10:09
Check the edits. You can clearly see the difference now, if it wasn't before — ellipsis, Feb 18 '19 at 10:47

score 0 · Answer 2 · answered Feb 14 '19 at 12:16

Use CSS display:none or visibility:hidden

display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.

visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.

Source

#hideTr
{
visibility:hidden /* OR display:none */

}

<table>
<tr id="hideTr">
    <td style="width: 10%;"></td>
    <td style="width: 40%;"></td>
    <td style="width: 16%;"></td>
    <td style="width: 10%;"></td>
    <td style="width: 7%;"></td>
    <td style="width: 7%;"></td>
    <td style="width: 10%;"></td>
</tr>
<tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>E</td>
    <td>F</td>
    <td>G</td>
    <td>H</td>
</tr>
<tr>
...
</tr>
...
</table>

How to hide a row header without affecting alignment

2 Answers2