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

Well, the short answer is you can't get this working in earlier versions of IE. I'm guessing IE8 would handle it. There's a CSS hack called expressions that would solve the issue but expressions are such a bad idea I won't even show you how to do it.

Keep your CSS the way it is, and add a JavaScript that does the same for you on DOMReady if the client is on IE.

Answer 2

Sadly, very little can be done. <colgroup> seems tempting, but browsers treat it differently.
You may have to manually add a class for each cell, or use JavaScript.

Answer 3

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; }

Answer 4

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 is supported in nearly all browsers except IE6 and below:

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

Answer 5

For IE you should/could be able set up col and colspans for your table columns then hide those in CSS.

As far as I know this will only work in IE, which (for once, to it's credit) has the best implementation of col and colspan. Other browsers are weak here (but it's a very minor part of the spec)