div style display none inside a table not working

Question

I am trying to toggle display of a div element which has a label and a textbox using javascript  Here is the code snippet   lt table id  authenticationSetting  style  display  none  gt   lt div id  authenticationOuterIdentityBlock  style  display  none   gt                   lt tr gt                        lt td class  orionSummaryHeader  gt  lt orion message key  policy wifi enterprise authentication outeridentitity   gt    lt  td gt                       lt td class  orionSummaryColumn  gt                           lt orion textbox id  authenticationOuterIdentity  size  30   gt                       lt  td gt                    lt  tr gt                   lt  div gt                lt  table gt    However on page load the div element still displays  the display toggling for the table element is working fine  I am at a loss as to why this is not working could it be that the style of the table element is overriding the style of the div element  P S  I am still able to hide elements inside the div but not the div itself

User · Accepted Answer

simply change  lt div gt  to  lt tbody gt    lt table id  authenticationSetting  style  display  none  gt     lt tbody id  authenticationOuterIdentityBlock  style  display  none   gt       lt tr gt         lt td class  orionSummaryHeader  gt           lt orion message key  policy wifi enterprise authentication outeridentitity    gt   lt  td gt         lt td class  orionSummaryColumn  gt           lt orion textbox id  authenticationOuterIdentity  size  30    gt         lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt

User · Answer

Semantically what you are trying is invalid html  table element cannot have a div element as a direct child  What you can do is  get your div element inside a td element and than try to hide it

[html] <div style display="none" > inside a table not working

Examples related to html

Examples related to css

Examples related to dom