[HTML/CSS]: Is there anyway to hide a column in a Table.

Question

I am showing results in a Table in a grid form. There is an ID column. Is there anyway through HTML or CSS that I can hide the first column?

Answer 1

Well you could apply css rule:

display: none;

CSS display property

Answer 2

tr > td:first-child { 
  display:none;
}

Answer 3

You could just not add that column to the HTML in the first place.

Answer 4

<colgroup> lookes promising, but in fact it doesn't allow too much CSS support - many CSS attrubutes simply don't apply with colgroup: http://www.w3schools.com/tags/tag_colgroup.asp
Another option is advanced CSS selectors, like + or :nth-child, but they aren't supported by an older browser.
Your best bet is to add a class to that column, or to use JavaScript.

Answer 5

add the "display:none;" style to a <col> element corresponding to the column. If you want to show the column later, add an id to the <col>.

<table>
    <col id="x" style="display:none" />
    <col />
    <col />
    <tr>
     <td>1</td>
     <td>2</td>
     <td>3</td>
    </tr>
</table>

<script>
    function showColumn() {
     document.getElementById("x").style.display = "";
    }
</script>