CODEWITHSUNDEEP
htmlcss
ZioBit
ZioBit

Reputation: 965

Keeping the width and/or the text alignment in a HTML table after display=none

As you can see here

https://jsfiddle.net/tjvn2mLx/1/

I have a table with two cells. The last one is right-aligned. It works.

I need to hide it, and then show it again. I set style.display = 'none', it works, it's invisible

document.getElementById('table1').style.display='none'

I try to show it again

document.getElementById('table1').style.display='block'

and something is wrong, either the width=100% is changed or the right-align is lost.
I tried setting the display to "inline-block" too, to no avail.
Since the project is bootstrap-based, I tried with row/col too but the behavior is exactly the same. Anyway, I would like to use the table solution if possible.

Upvotes: 1

Views: 297

Answers (2)

Aditya Singh
Aditya Singh

Reputation: 101

You should use visibility instead of display to hide like so
visibility: hidden;

and to show use
visibility: visible;

See the fiddle here: https://jsfiddle.net/adityasinghskit/fd4h6z5q/1/

To make it not take space add
position: absolute;
See the fiddle here: https://jsfiddle.net/adityasinghskit/fd4h6z5q/4/

Upvotes: 1

Arman Ebrahimi
Arman Ebrahimi

Reputation: 2297

Only do this change:

alert('now is ok')
document.getElementById('table1').style.display='none'
document.getElementById('table1').style.display='table' //here

https://jsfiddle.net/arman1373/kLqhfb57/1/

Upvotes: 0

Related Questions