How can i hide certain table column in a HTML table using CSS

Answer 1

You can use css3 nth child selector, e.g.

td:nth-child(4),td:nth-child(5), ...
{
   display:none;
}

jsFiddle here

Answer 2

I've got no idea what's the intent, the reason or the audience but if you append a data attribute to each column cell...

<td data-col="1"></td>

You can then use jQuery to hide all cells that belong to a specific column...

$('td[data-col=1]').hide ();

You could also use the ':nth-child ()' css pseudo class but it is not supported by some IE browsers

Hope it makes sense

Answer 3

Use something like this...

CSS

td:nth-child(4), td:nth-child(5), td:nth-child(6), td:nth-child(7)
{
   display:none;
}

DEMO

Answer 4

You can indeed do this:

http://jsfiddle.net/nEQ6g/1/

*EDIT - From my knowledge nth-child and visability: hidden don't play nice together. For what you want, you'd need to use display: none; - based upon the code I've provided you.

CSS:

table{
    border-collapse: collapse;
}

table tr td{
    padding: 10px;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

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

Answer 5

If you always want to show the first 3 colums and hide the rest of the colums in the row you might want to use:

tr > td:nth-child(n+4)
{
    visibility: hidden;
}

This will start at the index of 4 and will loop through the rest and will hide them.

With visibility: hidden; you will still keep the spacing it had.

jsFiddle

Answer 6

td:nth-child(n+4) {
    visibility: hidden
}

http://jsfiddle.net/hZRvx/

I think that that is the most clearest way to do it.