Hiding table columns – any simple way?

[tomasz86]

I want to make specific columns invisible.

http://codepen.io/anon/pen/Gtjue

This “should” work but in reality the only browser where it does is IE8. In Firefox the borders are still displayed and in Chrome the above CSS settings have no visible effect.

Is there any better way to do it instead of applying styles to each TD separately like this?

http://codepen.io/anon/pen/aygKD

[Subash]

You can use `nth-of-type()` pseudo element to hide second column.

td:nth-of-type(2) {

display: none;

}

http://codepen.io/anon/pen/zqGFg

[Paulie_D]

td:first-of-type + td {
display:none;
}

[Kitty Giraudel]

Based on a 6 columns table, if you want to hide ONLY the third, you could do:

td + td + td { display: none; }
td + td + td + td { display: block; }

[Paulie_D]

>but I’d really like to avoid it since it’s a huge table with almost 2500 TDs.

Wouldn’t that be basically useless from a readabilty standpoint?

[Paulie_D]

Pre-filtering of results before displaying the table would seem to best best option.

Of course, I have no idea how to do that. :)

[Paulie_D]

How are you going to enable columns on request?

Sounds to me like you need JS.

[Kitty Giraudel]

Checkbox hack. Pretty dirty. Do you have a reason you don’t want to use JS?

I highly recommand [this](http://filamentgroup.com/lab/responsive_design_approach_for_complex_multicolumn_data_tables/). Definitely what you’re looking for.

[Kitty Giraudel]

> This way everything should look the same even in IE5.

I see no good reason for this.

[Author]

Posts