How Can I Hide Certain Table Column In A Html Table Using Css

Question

I have a html table which is as follows

Solution 1:

You can indeed do this:

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

tabletrtd{
    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+ */
}

tabletrtd:nth-child(n+4){
    display: none;
}

Solution 2:

Use something like this...

CSS

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

DEMO

Solution 3:

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

http://jsfiddle.net/hZRvx/

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

Solution 4:

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

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

jsFiddle here

Solution 5:

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...

<tddata-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

Html5 Tech