show hide html table columns using css

Question

I want to display a basic html table with controls to toggle showing hiding of additional columns    lt table id  mytable  gt       lt tr gt           lt th gt Column 1 lt  th gt           lt th class  col1  gt 1a lt  th gt           lt th class  col1  gt 1b lt  th gt           lt th gt Column 2 lt  th gt           lt th class  col2  gt 2a lt  th gt           lt th class  col2  gt 2b lt  th gt       lt  tr gt       lt tr gt           lt td gt 100 lt  td gt           lt td class  col1  gt 40 lt  td gt           lt td class  col1  gt 60 lt  td gt           lt td gt 200 lt  td gt           lt td class  col2  gt 110 lt  td gt           lt td class  col2  gt 90 lt  td gt       lt  tr gt   lt  table gt    So Column 1 and Column 2 will be the only columns displayed by default - but when you click on the Column 1  I want 1a and 1b to toggle  and same with Column 2 with 2a and 2b   I may end up with more columns and lots of rows - so any javascript looping approaches have been too slow to work with when I tested   The only approach that seems to be fast enough is to set up some css like this   table hide1  col1   display  none    table hide2  col2   display  none    table hide3  col3   display  none     table show1  col1   display  table-cell    table show2  col2   display  table-cell    table show3  col3   display  table-cell      And then set up onClick function calls on the table header cells that will trigger a toggle - and determine which css class to set  mytable  to that will create the toggle effect that I m looking for   Is there an easy way to set this up so that the code can work for n   of columns   Update  Here is what I came up with  works great - and really fast   Let me know if you can think of ways to improve   CSS   col1  display  none     col2  display  none     col3  display  none     table show1  col1   display  table-cell    table show2  col2   display  table-cell    table show3  col3   display  table-cell      Javascript  function toggleColumn n        var currentClass   document getElementById  mytable   className      if  currentClass indexOf  show  n     -1            document getElementById  mytable   className   currentClass replace  show  n                 else           document getElementById  mytable   className           show  n            And the html snippet    lt table id  mytable  gt   lt tr gt       lt th onclick  toggleColumn 1   gt Col 1   A   B   C lt  th gt       lt th class  col1  gt A lt  th gt       lt th class  col1  gt B lt  th gt       lt th class  col1  gt C lt  th gt       lt th onclick  toggleColumn 2   gt Col 2   D   E   F lt  th gt       lt th class  col2  gt D lt  th gt       lt th class  col2  gt E lt  th gt       lt th class  col2  gt F lt  th gt       lt th onclick  toggleColumn 3   gt Col 3   G   H   I lt  th gt       lt th class  col3  gt G lt  th gt       lt th class  col3  gt H lt  th gt       lt th class  col3  gt I lt  th gt   lt  tr gt   lt tr gt       lt td gt 20 lt  td gt       lt td class  col1  gt 10 lt  td gt       lt td class  col1  gt 10 lt  td gt       lt td class  col1  gt 0 lt  td gt       lt td gt 20 lt  td gt       lt td class  col2  gt 10 lt  td gt       lt td class  col2  gt 8 lt  td gt       lt td class  col2  gt 2 lt  td gt       lt td gt 20 lt  td gt       lt td class  col3  gt 10 lt  td gt       lt td class  col3  gt 8 lt  td gt       lt td class  col3  gt 2 lt  td gt   lt  tr gt   lt  table gt

User · Answer

One line of code using jQuery          td nth-child 2    hide        If your table has header th   use this       td nth-child 2  th nth-child 2    hide      Source  Hide a Table Column with a Single line of jQuery code

User · Answer

No  that s pretty much it  In theory you could use visibility  collapse on some  lt col gt  s to do it  but browser support isn t all there   To improve what you ve got slightly  you could use table-layout  fixed on the  lt table gt  to allow the browser to use the simpler  faster and more predictable fixed-table-layout algorithm  You could also drop the  show rules as when a cell isn t made display  none by a  hide rule it will automatically be display  table-cell  Allowing table display to revert to default rather than setting it explicitly avoids problems in IE lt 8  where the table display values are not supported

User · Answer

I don t think there is anything you can do to avoid what you are already doing  however  if you are building the table on the client with javascript  you can always add the style rules dynamically  so you can allow for any number of columns without cluttering up your css file with all those rules   See http   www hunlock com blogs Totally Pwn CSS with Javascript if you don t know how to do this   Edit  For your  sticky  toggle  you should just append class names rather than replacing them   For instance  you can give it a class name of  hide2 hide3  etc   I don t think you really need the  show  classes  since that would be the default   Libraries like jQuery make this easy  but in the absence  a function like this might help   var modifyClassName   function  elem  add  string    var s    elem className    elem className       var a   s split       if  add      for  var i 0  i lt a length  i            if  a i     string              return                        s          string      else       s           for  var i 0  i lt a length  i              if  a i     string              s    a i                          elem className   s

User · Answer

if you re looking for a simple column hide you can use the  nth-child selector as well     tableid tr td nth-child 3    tableid tr th nth-child 3        display  none      I use this with the  media tag sometimes to condense wider tables when the screen is too narrow

[javascript] show/hide html table columns using css

Examples related to javascript

Examples related to html

Examples related to css

Examples related to html-table