当列隐藏在具有 table-layout 的表中时，IE8 不会调整 tbody 或 thead 的大小:已修复 [英] IE8 isn't resizing tbody or thead when a column is hidden in a table with table-layout:fixed
问题描述
当我使用 table-layout:fixed 在表格中隐藏一列时，IE 8 正在做一些非常奇怪的事情.该列被隐藏，table 元素保持相同的宽度，但 tbody 和 thead 元素不会调整大小以填充剩余的宽度.它适用于 IE7 模式(当然还有 FF、Chrome 等).有没有人以前见过这个或知道解决方法?
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?
这是我的测试页 - 切换第一列并使用开发控制台查看表格、tbody 和 thead 宽度:
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>
推荐答案
IE8 的一个简单变通方法是轻推表格，让 IE8 根据剩余的列调整列宽.假设 table 指向 table，下面的代码会起作用:
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);
致谢:我首先从 Srikanth 的博客.作为参考，这里是更新示例使用这种技术.
Credits: I read about this technique first from Srikanth's blog. And for reference, here is the updated example using this technique.
但是我应该注意到这种技术并不总是有效.我在更复杂的应用程序中看到一个案例，我无法更改样式似乎说服 IE 考虑到列数已更改(抱歉，我没有更简单的可重现案例).幸运的是，IE9 完全解决了这个问题.
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.
这篇关于当列隐藏在具有 table-layout 的表中时，IE8 不会调整 tbody 或 thead 的大小:已修复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
