Ways to hide first column of table through CSS

T开发者_开发知识库his 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?

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

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

Hide first column

table td:nth-child(1){ display:none;} 

Works OK in Chrome + FireFox but not in IE

Use Jquery to handle cross platform issues using:

$('table td:nth-child(1)').hide();

works in all browsers!

Simply use:

table td:nth-child(n){
   display:none;
}

Where n is the column you want to hide.

Here is an usage example:

table.marks.hideSubject       {td:nth-child(1) {display: none;}}
table.marks.hideDescription   {td:nth-child(2) {display: none;}}
table.marks.hideMark          {td:nth-child(3) {display: none;}}
table.marks.hideRank          {td:nth-child(4) {display: none;}}

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.

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.

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)

By using CSS nth-child we can hide the columns. Just need to specify the TABLE ID and Column Indexes.
In this example i am hiding last 3 columns of the table.

<style>
    #ID_OF_THE_TABLE tr *:nth-child(10),tr *:nth-child(9),tr *:nth-child(8){
        display: none;
    }
</style>

the solutions, that worked for me, was:

td { display: none; }
td + td { display: table-cell; }

No need of JavaScript, no need of an extra class.

Cheers