user3033194 user3033194 - 1 month ago 7
CSS Question

Hide column header without changing positions of the other headers in CSS

I have a table with 3 columns. I want to hide the first column header (but keep the column body intact). My code is given below:

HTML

<table>
<tr>
<th>#</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>12</td>
</tr>
</table>


CSS

th:first-child {
display: none;
}


This hides the first header all right, but causes the other headers to shift to the left, to fill up the space left by the missing header. How can I make them stay in the same place and not shift to the left? Please help!

JSFiddle here

Answer

When you use display:none a whole <th> gets removed, and all of the other elements have to fill the space. What you need to do is ensure that the <th> element stays there, to fill the empty space. Use this:

th:first-child {
  visibility:hidden;
}

or

th:first-child {
  opacity:0;
}
Comments