I am a relative newcomer to web programming, so probably I am making some obvious mistake here.

When I am trying to hide a row in a table from javascript, the table layout is getting completely broken. I am using Chrome browser. Originally, the cell content was getting wrapped, and the table width was getting shrunk. I then added style="table-layout: fixed" in the table tag and style="white-space:nowrap" in each td. This stopped the line wrapping, but still the content was not aligned on a line. Cells started moving left if there is space and column width varied from one row to another. I then added a fixed width to each of the <th> and <td> element and also to the div containing the table. Still the problem remained.

The problem can be seen in the following HTML code. If this is run in Chrome and the first column is hidden and shown, the table layout gets broken. The HTML code is not optimal as many different possibilities were tried here to fix the column width and stop word wrapping but none seemed to be working.

Any ideas? Thanks in advance,


<html>
<head>
<title>Table Test</title>

<script language="javascript">
function filterRows() {
var row = document.getElementById('DetailRow1');
var show = document.getElementById('ShowCB');
if (show.checked == false) {
row.style.display = "none";
}
else {
row.style.display = "block";
}
}
</script>

</head>

<body>
<div style="width: 600px; overflow:hidden;">
<table id="myTable" width="100%" cellpadding="5" cellspacing="2" style="table-layout:fixed;">
<col width="100"></col>
<col width="200"></col>
<col width="300"></col>
<thead>
<tr id="HeaderRow">
<th style="white-space:nowrap;width:100px;" bgcolor="FF0000"><strong>Header 1<strong></th>
<th style="white-space:nowrap;width:200px;" bgcolor="FF0000"><strong>Header 2<strong></th>
<th style="white-space:nowrap;width:300px;" bgcolor="FF0000"><strong>Header 3<strong></th>
</tr>
</thead>
<tbody>
<tr id="DetailRow1">
<td style="white-space:nowrap;width:100px; overflow:hidden;" bgcolor="00FF00">Data 1_1 in Row 1</td>
<td style="white-space:nowrap;width:200px; overflow:hidden;" bgcolor="00FF00">Data 1_2</td>
<td style="white-space:nowrap;width:300px; overflow:hidden;" bgcolor="00FF00">Data 1_3 in Row 1</td>
</tr>
<tr id="DetailRow2">
<td style="white-space:nowrap;width:100px; overflow:hidden;" bgcolor="0000FF">Data 2</td>
<td style="white-space:nowrap;width:200px; overflow:hidden;" bgcolor="0000FF">Data 2</td>
<td style="white-space:nowrap;width:300px; overflow:hidden;" bgcolor="0000FF">Data 2</td>
</tr>
<tr id="DetailRow3">
<td style="white-space:nowrap;width:100px; overflow:hidden;" bgcolor="FF00FF">Data 3_1</td>
<td style="white-space:nowrap;width:200px; overflow:hidden;" bgcolor="FF00FF">Data 3_2</td>
<td style="white-space:nowrap;width:300px; overflow:hidden;" bgcolor="FF00FF">Data 3_3</td>
</tr>
</tbody>
</table>
<input id="ShowCB" type="checkbox" name="cb1" value="1" checked="checked" onclick="javascript: filterRows();"/>Show
</div>
</body>
</html>