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.

Từ khóa » Html Table Hide Columns