Table width changes for display:none style

Keywords:html  table 


I have 2 portlet containing a table each. On first button click one portlet with table gets displayed and other remain hidden. On another button click vice-versa happen like entire portlet toggle. I did this using style display:none and show-hide, but now I am stuck with a problem that table column width changes for display none. I cannot use visibility since it creates a gap. How can I resolve this issue?

       <div class="portlet light bordered">
           <div class="portlet-body">
              <table id='aa'></table>
       <div class="portlet light bordered" style="display: none">
           <div class="portlet-body">
              <table id='bb'></table>

1 Answer: 

If you set display: none then it will hide the element and also ruin formatting.

To fix it you will need to setup your button click to add the following to style display: initial, or set it to whatever you need to get your desired result, maybe display: inherit or display: inline.

See here for more info:

A quick snippet from the link:

The display property also allows the author to show or hide an element. It is similar to the visibility property. However, if you set display:none, it hides the entire element, while visibility:hidden means that the contents of the element will be invisible, but the element stays in its original position and size.

And some info about the values I mentioned above:

block - Element is rendered as a block-level element

inline - Element is rendered as an inline element. This is default

initial - Sets this property to its default value.