Closed Bug 361327 Opened 18 years ago Closed 18 years ago

Cycling between display:block and display:none breaks table format

Categories

(Core :: Layout: Tables, defect)

Product:
Core
Component:
Layout: Tables
Version:
1.8 Branch
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED DUPLICATE of bug 291045

People

(Reporter: john.nye, Unassigned)

Details

Attachments

(1 file)

Sample page to reproduce problem
837 bytes, text/html
Details 
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1) Gecko/20061010 Firefox/2.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1) Gecko/20061010 Firefox/2.0

If a row in a table has its style cycled from block -> none -> block, all columns are squeezed into first column. Additionally the row may be extended with a blnck space positioned above it.

Reproducible: Always

Steps to Reproduce:
1. See included very simple sample that fails in FF2 but works in IE.
2.
3.

Actual Results:  
Squeezes Row contents into first cell position

Expected Results:  
Maintained row presentation

Sample page

<html>
<head><title>Test Case</title></head>
<body>
<table border=1>
<thead>
<tr><th>Col 1</th><th>Col2</th></tr>
</thead>
<tbody>
<tr id=row1></td><td>This is row 1</td><td>Column 2 of row 1</td></tr>
<tr id=row2></td><td>This is row 2</td><td>Column 2 of row 2</td></tr>
</tbody>
</table>
<form>
<input type=button value="Toggle Row 1" onClick="
	if (document.getElementById('row1').style.display == 'block') {
		document.getElementById('row1').style.display = 'none';	
	}
	else {
		document.getElementById('row1').style.display = 'block';
	}
">
<input type=button value="Toggle Row 2" onClick="
	if (document.getElementById('row2').style.display == 'block') {
		document.getElementById('row2').style.display = 'none';	
	}
	else {
		document.getElementById('row2').style.display = 'block';
	}
">

</form>
</html>
Sample included in text of bug report had some </td> items in error which have been removed in the attached sample page.
block is not a valid display form for <tr>. Use table-row.

Also refer to:
http://www.w3.org/TR/CSS21/visuren.html#propdef-display
And bug 180258.
Invalid?
Component: General → Layout: Tables
Product: Firefox → Core
QA Contact: general → layout.tables
Version: unspecified → 1.8 Branch
Changing display from block to table-row resolves problem in FF2, but makes things worse across other Browsers. Is 'block' really invalid?
This would most likely be the preferred sollution making use of the visibility property (http://www.w3.org/TR/CSS21/visufx.html#visibility):

if (document.getElementById('row1').style.visibility == 'visible') {
	document.getElementById('row1').style.visibility = 'collapse';	
}
else {
	document.getElementById('row1').style.visibility = 'visible';
}

IE doesnt support collapse though. The solution working in most browsers is:
if (document.getElementById('row1').style.display == '') {
	document.getElementById('row1').style.display = 'none';	
}
else {
	document.getElementById('row1').style.display = '';
}
That works for me.

*** This bug has been marked as a duplicate of 291045 ***
Status: UNCONFIRMED → RESOLVED
Closed: 18 years ago
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: