Ways to hide first column of table through CSS

Question

This code is working on browsers other than IE:

table.tbl.tr.td:first-child { display: none; }

What shall I use for to make it work on all browsers?

Answer 1

Your expression above won't work at all. table.tbl.tr.td will select a table element that is defined like this: <table class="tbl tr td"> but not its cells.

It should be like this and the :first-child selector is supported in pretty much all browsers above Internet Explorer 6:

table.tbl tr td:first-child { display: none; }

Answer 2

Unfortunately, older versions of IE do not support :first-child in CSS. Don't know about IE8. Anyways, if you don't want to do javascript, and you have access to the html, it's pretty easy to assign a "first" class to the first column tds in the table. So the html will look like:

<table>
  <tr>
    <td class="first">...</td>
    <td>..</td>
    ..
  </tr>
</table>

You can then create a css entry like:

table td.first { display: none; }