<tbody>元素被塞進表的第一列

這http://dbdev2.pharmacy.arizona.edu/wideproblem.html

如何獲得隱藏的行以正確的表格的寬度顯示？我甚至嘗試將它設置爲該行的css屬性，但它不起作用。

下面是代碼：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>The Case of the Squished Row</title> 
<style> 
table { 
    border: 1px solid black; 
    width: 600px; 
    } 
tr {border:1px solid black;} 
tr.anote {width:600px;} 
th { 
    border:1px solid black; 
    width:50%; 
    } 
td { 
    border: 1px solid black; 
    width: 25%; 
    } 

</style> 

<script type="text/javascript"> 
    function ShowRow(msg){ 
     var thecheck = document.getElementById("showcheck"); 
     var thebox= document.getElementById("showbox"); 
     var thenote= document.getElementById("shownote"); 
     if (thecheck.checked){ 
      thebox.innerHTML=msg; 
      thebox.style.color='red'; 
      thenote.style.display='block'; 
      } 
     else { 
      thebox.innerHTML='This is a checkbox'; 
      thebox.style.color='black'; 
      thenote.style.display='none'; 
      } 

     } 
</script> 
</head> 
<body> 
<h1>The Case of the Squished Row</h1> 
<br><br> 
<h2> using display:none CSS property</h2> 
<table> 
<tbody id="topline"> 
<tr><th id="showbox">This is a checkbox</th> 
<td><input type="checkbox" id="showcheck" onclick="ShowRow('Note is DISPLAY:BLOCK')"></td> 
<td>this is filler</td></tr> 
</tbody> 
<tbody id="shownote" style="display:none"> 
<tr class="anote"><th>This is a note</th><td>Hey! The box is checked!</td><td>this is filler</td></tr> 
</tbody> 
<tbody id="botline"> 
<tr><th>Big Filler</th><td>Little filler</td><td>this is filler</td></tr> 
</tbody> 
</table> 
</body> 
</html>

來源

2013-10-31 user2942256