Hiding table data using div style display none

Question

So  I ve hidden whole tables like this  which works fine    lt div style  display none  gt   lt table gt   lt tr gt  lt th gt Test Table lt  th gt  lt tr gt   lt tr gt  lt td gt 123456789 lt  td gt  lt tr gt   lt tr gt  lt td gt 123456789 lt  td gt  lt tr gt   lt tr gt  lt td gt 123456789 lt  td gt  lt tr gt   lt  table gt   lt  div gt    But I want to hide just a group of rows like this    lt table gt   lt tr gt  lt th gt Test Table lt  th gt  lt tr gt   lt div style  display none  gt   lt tr gt  lt td gt 123456789 lt  td gt  lt tr gt   lt tr gt  lt td gt 123456789 lt  td gt  lt tr gt   lt tr gt  lt td gt 123456789 lt  td gt  lt tr gt   lt  div gt   lt  table gt    But that doesn t work   Any hints

User · Answer

Give all the rows you want to hide a class name that you can use for hiding. Use javascript to add/remove this class from the different rows.

<table>
<tr><th>Test Table</th><tr>
<tr class="toHide"><td>123456789</td><tr>
<tr class="toHide"><td>123456789</td><tr>
<tr class="toHide"><td>123456789</td><tr>
</table>

CSS:

.toHide
{
 display: none;
}

User · Answer

x000D   x000D         add javascript   x000D        x000D      document getElementById  abc 1   style display  none   x000D        x000D        after that add html   x000D      x000D       lt html gt  x000D       lt head gt  x000D       lt title gt     lt  title gt  x000D       lt  head gt  x000D       lt body gt  x000D       lt table border   2 gt  x000D       lt tr id    abc 1  gt  x000D       lt td gt abcd lt  td gt  x000D       lt  tr gt  x000D       lt tr id   abc 2  gt  x000D       lt td gt efgh lt  td gt  x000D       lt  tr gt  x000D       lt  table gt  x000D       lt  body gt  x000D       lt  html gt  x000D   x000D       x000D   x000D   x000D

User · Answer

You are not allowed to have div tags between tr tags  You have to look for some other strategies like creating a CSS class with display  none and adding it to concerning rows or adding inline style display  none to concerning rows    hidden     display none      lt table gt     lt tr gt  lt td gt I am visible lt  td gt  lt tr gt     lt tr class  hidden  gt  lt td gt I am hidden using CSS class lt  td gt  lt tr gt     lt tr class  hidden  gt  lt td gt I am hidden using CSS class lt  td gt  lt tr gt     lt tr class  hidden  gt  lt td gt I am hidden using CSS class lt  td gt  lt tr gt     lt tr class  hidden  gt  lt td gt I am hidden using CSS class lt  td gt  lt tr gt   lt  table gt    or   lt table gt     lt tr gt  lt td gt I am visible lt  td gt  lt tr gt     lt tr style  display none  gt  lt td gt I am hidden using inline style lt  td gt  lt tr gt     lt tr style  display none  gt  lt td gt I am hidden using inline style lt  td gt  lt tr gt     lt tr style  display none  gt  lt td gt I am hidden using inline style lt  td gt  lt tr gt   lt  table gt

User · Answer

Unfortuantely  as div elements can t be direct descendants of table elements  the way I know to do this is to apply the CSS rules you want to each tr element that you want to apply it to    lt table gt   lt tr gt  lt th gt Test Table lt  th gt  lt tr gt   lt tr gt  lt td gt 123456789 lt  td gt  lt tr gt   lt tr style  display  none  other-property  value   gt  lt td gt 123456789 lt  td gt  lt tr gt   lt tr style  display  none  other-property  value   gt  lt td gt 123456789 lt  td gt  lt tr gt   lt tr gt  lt td gt 123456789 lt  td gt  lt tr gt   lt tr gt  lt td gt 123456789 lt  td gt  lt tr gt   lt  table gt    If you have more than one CSS rule to apply to the rows in question  give the applicable rows a class instead and offload the rules to external CSS    lt table gt   lt tr gt  lt th gt Test Table lt  th gt  lt tr gt   lt tr gt  lt td gt 123456789 lt  td gt  lt tr gt   lt tr class  something  gt  lt td gt 123456789 lt  td gt  lt tr gt   lt tr class  something  gt  lt td gt 123456789 lt  td gt  lt tr gt   lt tr gt  lt td gt 123456789 lt  td gt  lt tr gt   lt tr gt  lt td gt 123456789 lt  td gt  lt tr gt   lt  table gt

User · Answer

Instead of using  lt div gt   it would be better to use to provide the  lt tr gt   which you want to hide  an id and then hiding it using javascript

User · Answer

lt style type  text css  gt   hidden   display none     lt  style gt    lt table gt   lt tr gt  lt th gt Test Table lt  th gt  lt tr gt   lt tr class  hidden  gt  lt td gt 123456789 lt  td gt  lt  tr gt   lt tr class  hidden  gt  lt td gt 123456789 lt  td gt  lt  tr gt   lt tr class  hidden  gt  lt td gt 123456789 lt  td gt  lt  tr gt   lt  table gt    And instead of    lt div style  display none   gt   lt table gt     lt  table gt   lt  div gt    you had better use

User · Answer

Just set the display none on the  elements that you want to hide    lt table gt   lt tr gt  lt th gt Test Table lt  th gt  lt tr gt   lt tr style  display none  gt  lt td gt 1  123456789 lt  td gt  lt tr gt   lt tr gt  lt td gt 2  123456789 lt  td gt  lt tr gt   lt tr gt  lt td gt 3  123456789 lt  td gt  lt tr gt   lt  table gt

User · Answer

Yes  you can hide only the rows that you want to hide  This can be helpful if you want to show rows only when some condition is satisfied in the rows that are currently being shown  The following worked for me      lt table gt     lt tr gt  lt th gt Sample Table lt  th gt  lt  tr gt       lt tr id  row1  gt       lt td gt  lt input id  data1  type  text  name  data1    gt  lt  td gt     lt  tr gt    lt tr id  row2  style  display  none   gt       lt td gt  lt input id  data2  type  text  name  data2    gt  lt  td gt    lt  tr gt    lt tr id  row3  style  display  none   gt       lt td gt  lt input id  data3  type  text  name  data3    gt  lt  td gt    lt  tr gt   lt  table gt    In CSS  do the following      row2      display  none      row3      display  none      In JQuery  you might have something like the following to show the desired rows       document  ready function        if     row1   val        sometext       your desired condition             row2   show               if     row2   val                your desired condition             row3   show

User · Answer

Just apply the style attribute to the tr tag  In the case of multiple tr tags  you will have to apply the style to each element  or wrap them in a tbody tag    lt table gt     lt tr gt  lt th gt Test Table lt  th gt  lt tr gt     lt tbody style  display none  gt       lt tr gt  lt td gt 123456789 lt  td gt  lt tr gt       lt tr gt  lt td gt 123456789 lt  td gt  lt tr gt       lt tr gt  lt td gt 123456789 lt  td gt  lt tr gt     lt  tbody gt   lt  table gt

User · Answer

you should add style  display none  in any of  lt tr gt  that you want to hide

User · Answer

Wrap the sections you want to hide in their own tbody and dynamically show hide that

[css] Hiding table data using <div style="display:none">

Examples related to css

Examples related to html