当一个列隐藏在table-layout：fixed的表中时，IE8不会调整tbody或thead的大小 [英] IE8 isn't resizing tbody or thead when a column is hidden in a table with table-layout:fixed
问题描述
这是我的测试页面 - 切换第一列并使用开发控制台查看表格，tbody和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;
宽度：100％;
border-collapse：collapse;
}
td，{
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>切换第一列< / a>
< script type =text / javascript>
函数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（）;返回虚假; };
< / script>
< / body>
< / html>
IE8的简单解决方法在于给出table a nudge，让IE8根据剩余的列调整列宽。假设 table 指向表格，以下将解决这个问题：
table.style.display =inline-table;
window.setTimeout（function（）{table.style.display =;}，0）;
致谢：我首先从 Srikanth的博客。
作为参考，这里是更新的示例使用这种技术。
但是我应该注意，这种技术总是不起作用。我在一个更复杂的应用程序中看到一个案例，我无法改变样式似乎说服IE考虑到列数已更改（抱歉，我没有更简单的可重现案例）。幸运的是，IE9完全解决了这个问题。
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>
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.
这篇关于当一个列隐藏在table-layout：fixed的表中时，IE8不会调整tbody或thead的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
