297658 - Table TRs and TDs are not re-displayed correctly after style.display=...

Status: RESOLVED DUPLICATE of bug 97506

(Core :: DOM: Core & HTML, defect)

Description

[Boris Aranovich]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.8) Gecko/20050511 Firefox/1.0.4
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.8) Gecko/20050511 Firefox/1.0.4

Tested the case with Explorer (5.5, 6), and Mozilla. I guess it's Gecko's fault.
A simple table, of which cells or rows you alter with Javascript by
oObj.style.display='none' or ...='block' (or 'inline'), does not render the
cells correctly.
Very odd results, I added a test file to demonstrate it.

Reproducible: Always

Steps to Reproduce:
1. Create table
2. Create a script that hides and then shows the cells (DOM)
3. Repeat step 2 several times to see a good demonstration.

Actual Results:  
Table cells should appear perfectly, as on first render of page

Expected Results:  
Cells appearing oddly. It seems that new non-existing cells are added in between
the place where cell was hidden to where it was displayed again. Creates weird
spacing.

Comment 1

[Boris Aranovich]

Attachment: Testcase for the bug

View attachment's source to see that nothing peculiar isn't being perform. All
basic and standard code.

Comment 2

[Boris Aranovich]

Attachment: Testcase for the bug

View attachment's source to see that nothing peculiar isn't being perform. All
basic and standard code.

Comment 3

[Martijn Wargers (dead)]

You shouldn't use display='block', but display='table-cell' or
display='table-row' to get it working at least a bit like you would expect.
But when you do that, there is still a bug remaining, the bug I'm duping this
against.

*** This bug has been marked as a duplicate of 97506 ***

Comment 4

[Boris Aranovich]

Hmm, weird I couldn't find the other reports on this... Thought I searched well.
The thing is that 'table-cell' or 'table-row' properties work on Mozilla, but
not on IE (have no idea what about other clients). So to make it cross-browser,
the solution is to use display=''