Hiding Table Columns - Any Simple Way? - CSS-Tricks

Home › Forums › CSS › Hiding table columns – any simple way?

• This topic is empty.

Viewing 9 posts - 1 through 9 (of 9 total)

• Author Posts
• July 20, 2013 at 3:29 am #46551 tomasz86Participant

  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

  July 20, 2013 at 3:58 am #143605 SubashMember

  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

  July 20, 2013 at 5:59 am #143608 Paulie_DMember

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

  July 20, 2013 at 6:06 pm #143806 Kitty GiraudelParticipant

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

  July 21, 2013 at 3:48 am #143831 Paulie_DMember

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

  July 21, 2013 at 5:25 am #143851 Paulie_DMember

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

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

  July 21, 2013 at 7:42 am #143867 Paulie_DMember

  How are you going to enable columns on request?

  Sounds to me like you need JS.

  July 21, 2013 at 12:12 pm #143870 Kitty GiraudelParticipant

  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.

  July 26, 2013 at 4:57 am #144670 Kitty GiraudelParticipant

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

  I see no good reason for this.

• Author Posts

Viewing 9 posts - 1 through 9 (of 9 total)

• The forum ‘CSS’ is closed to new topics and replies.