177917 - Table layout affected after changing CSS "display" property with javascript

Status: VERIFIED INVALID

(Core :: Layout: Tables, defect)

Description

[Konstantin Vainer]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.2b) Gecko/20021016
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.2b) Gecko/20021016           [*same in mozilla 1.1 and mozilla 1.2b under linux*]

When table is being hidden and then shown again using Javascript to alter its
display CSS propery, the layout of its contents changes.


Reproducible: Always

Steps to Reproduce:
You can definitely use the url specified to reproduce the problem.
it contains simplified document representing the problem...

* w3c validator (both html and css) passes all the test without any
error/warning on this page.
Actual Results:  
after applying javascript to change "display" css property for the table: the
cells in the table do not use all the space inside the table. (like the width
for the table was not specified) , yet the table itself still preserves its
width (at least the table border is still in place). the rest of the space (that
the cells no longer use) is left empty.

Expected Results:  
the cells should take up all the available space inside the table just as they
do before using javascript... "display" property of the table should only alter
displaying the table, not more, but not less :)

In addition, i saw pretty similar problem with using javascript and tables
hiding/reappearing:

when the table is initially "hidden" (display: none;) and its content is _wider_
than a screen width, once it is "shown" (display: block;)  the table won't show
up complete, the content is just being CUT and only the part that fits inside
the screen can be viewed (normally i would say it should display everything and
let use horizontal scroll) ...

Comment 1

[Bernd]

Attachment: testcase

Comment 2

[Bernd]

Attachment: testcase switching between display:none and display:table

Comment 3

[Boris Zbarsky [:bzbarsky]]

> once it is "shown" (display: block;)

If you want it to be a table, you should use "display: table" per CSS2 (and yes,
this is a bug in IE).  Otherwise, it will render as a block (which includes not
shrinkwrapping and so forth).

Use |.display = ""| to reset the display value to the "default" in either
browser; that will work in IE and Mozilla.

Comment 4

[Sören 'Chucker' Kuklau (gone)]

V INV