Hiding Table Columns - Any Simple Way? - CSS-Tricks
Có thể bạn quan tâm
Home › Forums › CSS › Hiding table columns – any simple way?
- This topic is empty.
- 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 #143605SubashMember
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 #143608Paulie_DMember
td:first-of-type + td { display:none; }
July 20, 2013 at 6:06 pm #143806Kitty 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 #143831Paulie_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 #143851Paulie_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 #143867Paulie_DMember
How are you going to enable columns on request?
Sounds to me like you need JS.
July 21, 2013 at 12:12 pm #143870Kitty 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 #144670Kitty GiraudelParticipant
> This way everything should look the same even in IE5.
I see no good reason for this.
- Author Posts
- The forum ‘CSS’ is closed to new topics and replies.
Từ khóa » Html Table Hide Column
-
How To Hide Columns In HTML Table? - Stack Overflow
-
Hiding Columns - FooTable - GitHub Pages
-
Show Or Hide Table Columns - HTML DOM
-
Column Toggle Table - Tryit Editor V3.7
-
Is There An Easy Way To Hide A Table Column/rows That Contain Labels?
-
How To Hide A Column In Html Table Using Css?
-
Show / Hide HTML Table Columns By JQuery: 3 Demos
-
Show Hide Table Column Using JavaScript
-
Hidden Columns - DataTables Example
-
Table: Column Toggle - JQuery Mobile Demos
-
Hide Table Column Using JavaScript - Dotnet Learners
-
DataTables Example - Show / Hide Columns Dynamically
-
Automatic Column Hiding Using CSS In Responsive Table - Phppot
-
Hide A Table Column With A Single Line Of JQuery Code - DevCurry