tte*_*ace 8 javascript html-table toggle internet-explorer-8
当我用表格布局隐藏表格中的列时,IE 8正在做一些非常奇怪的事情:修复.该列被隐藏,表元素保持相同的宽度,但tbody和thead元素未调整大小以填充剩余的宽度.它适用于IE7模式(当然还有FF,Chrome等).有没有人见过这个或知道一个变通方法？
这是我的测试页面 - 切换第一列并使用开发控制台检查表格,tbody和thead宽度:
<!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>
ave*_*net 14
IE8的一个简单的解决方法是给表提供一个微调,让IE8根据剩余的列调整列宽.假设table指向表格,以下将做到这一点:
table.style.display = "inline-table";
window.setTimeout(function(){table.style.display = "";},0);
致谢:我首先从Srikanth的博客中了解了这项技术.作为参考,这是使用此技术的更新示例.
但是我应该注意到这种技术并不总是有效.我在一个更复杂的应用程序中看到一个案例,我无法改变样式似乎说服IE考虑到列数已更改(抱歉,我没有更简单的可重现案例).幸运的是,IE9完全解决了这个问题.