How to hide columns in HTML table

Question

I have created a table in ASPX  I want to hide one of the columns based on the requirement but there is no attribute like visible in the HTML table building  How can I solve my problem

User · Answer

You can also hide a column using the col element https://developer.mozilla.org/en/docs/Web/HTML/Element/col

To hide the second column in a table:

<table>
  <col />
  <col style="visibility:collapse"/>
  <tr><td>visible</td><td>hidden</td></tr>
  <tr><td>visible</td><td>hidden</td></tr>

Known issues: this won't work in Google Chrome. Please vote for the bug at https://bugs.chromium.org/p/chromium/issues/detail?id=174167

User · Answer

Here is the another solution to hide dynamically a column define class for both th and td of the column to hide  lt table gt      lt tr gt        lt th gt  Column 1  lt  th gt        lt th class  quot dynamic-hidden-col quot  gt  Column 2  lt  th gt        lt th Column 3  lt  th gt     lt  tr gt     lt tr gt        lt td gt  Value 1  lt  td gt        lt td class  quot dynamic-hidden-col quot  gt  Value 2  lt  td gt        lt td gt  Value 3  lt  td gt     lt  tr gt        lt td gt  row 2 Value 1  lt  td gt        lt td class  quot dynamic-hidden-col quot  gt  row 2 Value 2  lt  td gt        lt td gt  row 2 Value 3  lt  td gt     lt tr gt   lt  table gt   Here is the Jquery script for hide column      hide-col   click function                   quot  dynmic-hidden-col quot   hide         This way the table column can be hidden dynamically

User · Answer

you can also use    lt td style  visibility hidden   gt  or  lt td style  visibility collapse   gt    The difference between them that  hidden  hides the cell but it holds the space but with  collapse  the space is not held like display none  This is significant when hidding a whole column or row

User · Answer

You can use the nth-child CSS selector to hide a whole column    myTable tr  gt    nth-child 2        display  none      This works under assumption that a cell of column N  be it a th or td  is always the Nth child element of its row   Here s a demo       If you want the column number to be dynamic  you could do that using querySelectorAll or any framework presenting similar functionality  like jQuery here       myTable tr  gt    nth-child 2    hide      Demo with jQuery   The jQuery solution also works on legacy browsers that don t support nth-child

User · Answer

You need to use Style Sheet for this purpose    lt td style  display none   gt

User · Answer

Bootstrap people use  hidden class on  lt td gt

User · Answer

Kos s answer is almost right  but can have damaging side effects   This is more correct    myTable tr td nth-child 1    myTable th nth-child 1        display  none      CSS  Cascading Style Sheets  will cascade attributes to all of its children   This means that   nth-child 1  will hide the first td of each tr AND hide the first element of all td children   If any of your td have things like buttons  icons  inputs  or selects  the first one will be hidden  woops     Even if you don t currently have things that will be hidden  image your frustration down the road if you need to add one   Don t punish your future self like that  that s going to be a pain to debug   My answer will only hide the first td and th on all tr in  myTable keeping your other elements safe

User · Answer

x000D   x000D   lt style gt  x000D   hideFullColumn tr  gt   hidecol x000D    x000D      display none  x000D    x000D   lt  style gt  x000D   x000D   x000D    use  hideFullColumn in table and  hidecol in th You don t need to add class in td individually as it will be problem because index may not be in mind of each td

User · Answer

lt  doctype html gt   lt html lang  en  gt   lt head gt   lt style id  myStyleSheet  gt       lt  style gt   var column   3  var styleSheet   document getElementById  myStyleSheet   sheet  var rule    table  tr td nth-child    column     table th nth-child    column       display  none    styleSheet insertRule rule

User · Answer

You can also do what vs dev suggests programmatically by assigning the style with Javascript by iterating through the columns and setting the td element at a specific index to have that style

[html] How to hide columns in HTML table?

Examples related to html

Examples related to asp.net

Examples related to html-table