Closed
Bug 114492
Opened 23 years ago
Closed 23 years ago
table height grows indefinitely when display/hide its row
Categories
(Core :: Layout: Tables, defect)
Tracking
()
RESOLVED
DUPLICATE
of bug 112113
People
(Reporter: dtesler, Assigned: karnaze)
Details
From Bugzilla Helper:
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:0.9.6) Gecko/20011120
BuildID: 2001112009
Table height grows indefinitely when its row display set to "none" and then set
to "block". This behavior is true for ANY table (fixed or auto
table-layout, with simple text or more complex HTML in table cells, with or
without wrap, i.e. white-space)! It is wrong in Mozilla, but works perfectly in
any IE 5.0 or later.
This BUG makes use of DOM impossible with HTML Table!
Reproducible: Always
Steps to Reproduce:
1. Test this HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<title>Test 1 of ScrollTree</title>
<script type="text/javascript">
var bExpand=false;
function displayRow(e){
var oRow2=document.getElementById("tlb").rows[1];
if (bExpand){
oRow2.style.display="block";
} else {
oRow2.style.display="none";
}
bExpand=!bExpand;
}
function init(){
document.getElementById("button1").addEventListener("click",displayRow,false);
}
onload=init;
</script>
</head>
<body>
<input type="button" value="hide/display" id="button1" name="button1"> <br>
<br>
<br>
<br>
<table id="tlb" style="table-layout: auto; background-color: blue;"
cellspacing="0" cellpadding="0" rules="All">
<tbody>
<tr>
<td>hello 1</td>
</tr>
<tr>
<td>hello 2</td>
</tr>
</tbody>
</table>
</body>
</html>
2. Observe that that after a 4th clik on a button table height start grow.
3. Observe the text of a second row. It gets moved to the right couple of pixels.
4. Same but more severe behavior if to hide/display first row.
Actual Results: After a 4th clik on a button table height start grow.
Expected Results: Table height should always remain the same after hide/display
of its row.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<title>Test 1 of ScrollTree</title>
<script type="text/javascript">
var bExpand=false;
function displayRow(e){
var oRow2=document.getElementById("tlb").rows[1];
if (bExpand){
oRow2.style.display="block";
} else {
oRow2.style.display="none";
}
bExpand=!bExpand;
}
function init(){
document.getElementById("button1").addEventListener("click",displayRow,false);
}
onload=init;
</script>
</head>
<body>
<input type="button" value="hide/display" id="button1" name="button1"> <br>
<br>
<br>
<br>
<table id="tlb" style="table-layout: auto; background-color: blue;"
cellspacing="0" cellpadding="0" rules="All">
<tbody>
<tr>
<td>hello 1</td>
</tr>
<tr>
<td>hello 2</td>
</tr>
</tbody>
</table>
</body>
</html>
|
||
Comment 1•23 years ago
|
||
The correct display type for table rows per the CSS2 spec is table-row. Using
this in Mozilla will lead to no problems. Yes, IE is broken and does not
support display: table-row.
Try setting .display = "" instead of "block" or "table-row"; this resets display
to its default value and should work in both browsers.
*** This bug has been marked as a duplicate of 112113 ***
Status: UNCONFIRMED → RESOLVED
Closed: 23 years ago
Resolution: --- → DUPLICATE
Summary: table height grows indefinitely when display/hide its row → table height grows indefinitely when display/hide its row
You need to log in
before you can comment on or make changes to this bug.
Description
•