How to hide columns in HTML table?
You can use the nth-child
CSS selector to hide a whole column:
#myTable tr > *:nth-child(2) { display: none;}
This works under assumption that a cell of column N (be it a th
or td
) is always the Nth child element of its row.
If you want the column number to be dynamic, you could do that using querySelectorAll
or any framework presenting similar functionality, like jQuery
here:
$('#myTable tr > *:nth-child(2)').hide();
(The jQuery solution also works on legacy browsers that don't support nth-child
).
you can also use:
<td style="visibility:hidden;">or<td style="visibility:collapse;">
The difference between them that "hidden" hides the cell but it holds the space but with "collapse" the space is not held like display:none. This is significant when hidding a whole column or row.