toggle display from block to none incorrectly displays table elements




14 years ago
11 years ago


(Reporter: doug_x_nichols, Assigned: bugzilla)


Firefox Tracking Flags

(Not tracked)




(1 attachment)



14 years ago
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

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

14 years ago
Created attachment 181216 [details]
example of hide/show olumns and rows
Table parts aren't display: block natively, they are things like display:
table-row and display: table-cell - see

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.
Last Resolved: 14 years ago
Resolution: --- → INVALID
*** Bug 361327 has been marked as a duplicate of this bug. ***
Duplicate of this bug: 431923
You need to log in before you can comment on or make changes to this bug.