291045 - toggle display from block to none incorrectly displays table elements

Status: RESOLVED INVALID

(Firefox :: General, defect)

Description

[Doug Nichols]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0

Using DOM ecma to change .style.display = block/none incorrectly displays table
elements.

See attached html file.

When toggling rows/columns in a table incorrectly adds space and incorrectly
draws table elements. The following script shows how to hide/display rows and
columns. The script works but the display is incorrect and adds space to the
right side of the cells:

function show_hide_column(col_no, do_show) {
    var stl =  (do_show) ? 'block' : 'none';
    var tbl  = document.getElementById( 'id_of_table' );

    for (var x = 0; x < tbl.tHead.rows.length; x++) {
	tbl.tHead.rows[x].cells[col_no].style.display = stl;
    }

    for (var z = 0; z < tbl.tBodies.length; z++) {
	for (var x = 0; x < tbl.tBodies[z].rows.length; x++) {
	    tbl.tBodies[z].rows[x].cells[col_no].style.display = stl;
	}
    }

    for (var x = 0; x < tbl.tFoot.rows.length; x++) {
	tbl.tFoot.rows[x].cells[col_no].style.display = stl;
    }
}

function show_hide_row(row_no, do_show) {
    var stl =  (do_show) ? 'block' : 'none';
    var tbl  = document.getElementById('id_of_table');
    for (var z = 0; z < tbl.tBodies.length; z++) {
	tbl.tBodies[z].rows[row_no].style.display = stl;
    }
}



Reproducible: Always

Steps to Reproduce:
1. Load example html file
2. Hide a column and show it several times
3. Note extra space on right side

4. Also, try with rows
5. Note cells are incorrectly displayed and loose size

Actual Results:  
table no longer looks correct.

Expected Results:  
display the cells correctly

Comment 1

[Doug Nichols]

Attachment: example of hide/show olumns and rows

Comment 2

[Phil Ringnalda (:philor)]

Table parts aren't display: block natively, they are things like display:
table-row and display: table-cell - see http://www.w3.org/TR/REC-CSS2/tables.html#q2

If you want to do cross-browser show/hide, your best bet is alternating between
.display = "none" and .display = "" to reset to each browser's default.

Comment 3

[Mats Palmgren (inactive)]

*** Bug 361327 has been marked as a duplicate of this bug. ***