Closed Bug 476471 Opened 15 years ago Closed 15 years ago

Changing the style.display property of a <tr> to "block" cause the table to expand by 2px

Categories

(Core :: Layout: Tables, defect)

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

Tracking

()

Status:
VERIFIED INVALID

People

(Reporter: ashmorebradley, Unassigned)

References

Details

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5

When using javascript to hide a table row by changing the style.display property a <tr> tag will cause the containing table to expand by 2px after each cycle.

Reproducible: Always

Steps to Reproduce:
1.Using this code...
<html>
<head>
<script type="text/javascript">
var px;
function setSize(){
	document.getElementById("size").value = document.getElementsByTagName("tbody")[0]["clientHeight"];
}
function toggleRow(){
    var hide = document.getElementById("hideme");

    if( hide.style.display != "block" ){
        hide.style.display = "block";
		setSize();
    }else{
        hide.style.display = "none";
    }   
}

</script>
</head>
<body onload="setSize();">
<input type="button" onclick="toggleRow();" value="toggle"/><br />
<label>tbody height: </label><input type="text" id="size" />
<table>
	<tr id="hideme">
		<td>THIS WILL BE HIDDEN</td>
	</tr>
</table>
</body>
</html>

2. Click on the toggle button twice.
3. Repeat step 2 as desired.
Actual Results:  
The clientHeight property of the <tbody> is increase by 2 causing the text to gradually move lower on the page.

Expected Results:  
The table row should have been hidden on the first click and redisplayed in the same position on the second click.
Use display:table-row instead of display:block for table rows, since display:block is never going to do quite what you want.  See bug 417644 and bug 338735 for other examples.  Bug 162063 makes it worse by causing "display:block" to add 2px each time.  

This isn't exactly a dup of any of the bugs I mentioned, so I'm just going to mark this as invalid.
Component: General → Layout: Tables
Product: Firefox → Core
QA Contact: general → layout.tables
Summary: Changing the style.display property of a <tr> cause the table to expand by 2px → Changing the style.display property of a <tr> to "block" cause the table to expand by 2px
Status: UNCONFIRMED → RESOLVED
Closed: 15 years ago
Depends on: 162063
Resolution: --- → INVALID
Status: RESOLVED → VERIFIED
Version: unspecified → 1.9.0 Branch
(Or set display to the empty string, since IE6 gets confused by "table-row".)
You need to log in before you can comment on or make changes to this bug.