I can successfully hide some table cells using jQuery. When I then measure the height of a hidden cell, the space that the cell would occupy if not hidden appears as blank space, pushing all the remaining cells in that row across by one column. It's as if the the cell is reinserted in the table flow, but its content is hidden. The example below demonstrates the problem. Click "hide column 2" followed by "measure row 1 column 2" to see it happen. The example code is standalone - just save it as an HTML file.
This affects FF3 and Chrome, but not IE7.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("a.clickToHide").click(function() {
$(".col2").hide();
});
$("a.clickToMeasure").click(function() {
$("span.result").text($("tr.row1 td.col2").height());
});
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th class="col1"> Column 1 </th>
<th class="col2"> Column 2 </th>
<th class="col3"> Column 3 </th>
</tr>
</thead>
<tbody>
<tr class="row1">
<td class="col1"> Column 1 </th>
<td class="col2"> Column 2 </th>
<td class="col3"> Column 3 </th>
</tr>
<tr class="row2">
<td class="col1"> Column 1 </th>
<td class="col2"> Column 2 </th>
<td class="col3"> Column 3 </th>
</tr>
</tbody>
</table>
<a class="clickToHide" href="#">Click to hide column 2</a> <br />
<a class="clickToMeasure" href="#">Click to measure row 1 column 2</a> <br />
<span class="result"></span>
</body>