删除列后使 IE8 重新渲染表

Question

我有一个这样的table：

<table width="100%" style="table-layout: fixed;" class="listtable"> ... </table>

在 DOM 加载后，我删除了最后一个 td。每个浏览器，当然除了 IE8，都将表格保持在 100%。

IE8 只是删除该列，留下空间，而不调整其他列。检查表时，table 元素为 100%，但 tbody 不是。我已经尝试在删除列后设置tbody 的宽度，但没有效果。

有谁知道如何强制 IE8 重新渲染我的表格并拉伸超过 100%？

注意：我无法控制服务器端生成的 html，所以我需要在这里使用 JavaScript。

Answer 1

我尝试根据您的需要创建一个 jsfiddle，但在激活 IE8 兼容模式的情况下，我没有遇到您的 IE9 问题。那个脚本适合你吗？ http://jsfiddle.net/3TpGt/2/

我在不使用 javascript 的情况下创建了一个代码，因为我不知道您是否要使用库。

var table = document.getElementById("myTable");

var th = table.getElementsByTagName("th");
var thead = table.getElementsByTagName("thead");
var tbody= table.getElementsByTagName("tbody");
var tbody_tr= tbody[0].getElementsByTagName("tr");
var thead_tr = thead[0].getElementsByTagName("tr");

thead_tr[0].removeChild(th[th.length-1]);

var current_td = null;
for(i = 0; i < tbody_tr.length; i++) {
    current_td = tbody_tr[i].getElementsByTagName("td");
    tbody_tr[i].removeChild(current_td[current_td.length-1]);
}​

然后您可以在删除后强制列宽：

th[0].width = '50%';
th[1].width = '50%';

或者，如果您希望浏览器自动重新计算列宽，请更改表格的样式：

style="table-layout: auto; "