Menu
IE 8 is doing something very strange when I hide a column in a table with table-layout:fixed. The column is hidden, the table element stays the same width, but the tbody and thead elements are not resized to fill the remaining width. It works in IE7 mode (and FF, Chrome, etc. of course). Has anyone seen this before or know of a workaround?
Here is my test page - toggle the first column and use the dev console to check out the table, tbody and thead width:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>bug</title>
<style type="text/css">
table {
table-layout:fixed;
width:100%;
border-collapse:collapse;
}
td, th {
border:1px solid #000;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th id="target1">1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td id="target2">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
<a href="#" id="toggle">toggle first column</a>
<script type="text/javascript">
function toggleFirstColumn() {
if (document.getElementById('target1').style.display=='' ||
document.getElementById('target1').style.display=='table-cell') {
document.getElementById('target1').style.display='none';
document.getElementById('target2').style.display='none';
} else {
document.getElementById('target1').style.display='table-cell';
document.getElementById('target2').style.display='table-cell';
}
}
document.getElementById('toggle').onclick = function(){ toggleFirstColumn(); return false; };
</script>
</body>
</html>
632
A simple work-around for IE8 consists in giving the table a nudge, to get IE8 to adjust the column width based on the remaining columns. Assuming table points the to the table, the following will do the trick:
table.style.display = "inline-table";
window.setTimeout(function(){table.style.display = "";},0);
Credits: I read about this technique first from Srikanth's blog. And for reference, here is the updated example using this technique.
I should note however that this technique doesn't always work. I am seeing a case in a more complicated app where no style change I could do seem to convince IE take into account that the number of columns changed (sorry, I don't have a simpler reproducable case). Luckily for us, IE9 entirely solves this problem.
94
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
