Jquery 固定表列宽（使用colgroup）在IE和Safari中删除列后不起作用

我有一个带有标记的表，如图所示

<table>
<colgroup>
<col span="1" width="120px" />
<col span="1" width="230px" />
<col span="1" width="230px" />
<col span="1" width="230px" />
</colgroup>
<thead>...</thead>
<tbody>...</tbody>
</table>

我已经尝试了所有可能的解决方案——从为td和th分配宽度，到移除柱而不是隐藏，可见性——折叠等等，但似乎都不起作用

查看此信息：

宽度属性不应有任何单位（px）

此属性在HTML5中也不可用，请改用css。

宽度属性不应有任何单位（px）

---

此属性在HTML5中也不可用，请改用css。

在您的示例中，列的宽度是固定的，但表的布局不是固定的。如果表布局不是固定的，则列将增长以填充上一列的剩余部分

您需要为表格提供

表格布局：固定

，以满足宽度要求

演示：

HTML:

重要提示：如果删除任何列，下一列将拾取

colgroup

宽度，因为列索引现在将移动到下一列。i、 e.删除第3列时，第4列将占据其索引位置，因此应用于该索引的宽度将适用

注意：最好通过CSS指定宽度，而不是作为属性

更新：

事实上，如果表格

宽度

设置为

自动

，则IE的行为方式应该是IE。Chrome扩展了列

演示2：

如果删除了整个colgroup，并且只在第一行的列上指定了宽度，那么它在IE和Chrome中都可以正常工作

---

演示3:

在您的示例中，列的宽度是固定的，但表的布局不是固定的。如果表布局不是固定的，则列将增长以填充上一列的剩余部分

您需要为表格提供

表格布局：固定

，以满足宽度要求

演示：

HTML:

重要提示：如果删除任何列，下一列将拾取

colgroup

宽度，因为列索引现在将移动到下一列。i、 e.删除第3列时，第4列将占据其索引位置，因此应用于该索引的宽度将适用

注意：最好通过CSS指定宽度，而不是作为属性

更新：

事实上，如果表格

宽度

设置为

自动

，则IE的行为方式应该是IE。Chrome扩展了列

演示2：

如果删除了整个colgroup，并且只在第一行的列上指定了宽度，那么它在IE和Chrome中都可以正常工作

---

演示3:

在IE和Chrome中的效果完全相同：Thnks用于小提琴…但在单击del后单元格的宽度会发生变化…第三列的宽度最初为150，单击del后为187像素…我希望它们在单击del后也具有相同的宽度。@bhavyaw:作为答案添加。在IE和Chrome中的效果完全相同：Thnks用于小提琴提琴…但在单击del后单元格的宽度发生了变化…第三列的宽度最初为150，单击del后为187 px…我希望它们在单击del后具有相同的宽度。@bhavyaw：作为答案添加。我已经使用CSS完成了此操作。问题是它在隐藏列之前工作得很好，但在隐藏列之后就不行了。我已经用CSS做过了。问题是它在隐藏列之前工作正常，但在隐藏列之后没有。再次感谢…首先，表布局：修复已存在于我的css中（此处未共享）。您刚才给我的小提琴的工作方式与我的应用程序的工作方式完全相同。也就是说，它在chrome和firefox中保留了列宽，但在IE和safari中没有保留列宽。你在E.E.试过吗。当只剩下一列时，单击删除2 3次后。它的宽度增加到桌子的宽度。（它仍保留在铬合金中）。我不希望它失去通过colgroup.Hmmmm指定的初始宽度。。。是的，我确实观察得很仔细！事实上，IE做得不错，Chrome不行。已经添加了上面的第二个演示。还可以看到上面的第三个演示，其中有一个在IE和Chrome中都可以使用的解决方法。非常感谢…表格宽度：自动添加缺少的成分。再次感谢…第一个表格布局：已在我的css中修复（此处未共享）.你刚才给我的小提琴的工作原理和我的应用程序的工作原理一模一样。也就是说，它在chrome和firefox中保留了列宽，但在IE和safari中没有保留列宽。你在E.E.试过吗。当只剩下一列时，单击删除2 3次后。它的宽度增加到桌子的宽度。（它仍保留在铬合金中）。我不希望它失去通过colgroup.Hmmmm指定的初始宽度。。。是的，我确实观察得很仔细！事实上，IE做得不错，Chrome不行。已经添加了上面的第二个演示。还可以看到上面的第三个演示，其中有一个在IE和Chrome中都可以使用的解决方案。非常感谢…表宽：自动添加缺少的成分。

function deleteshift(obj){
    var tdindex = obj.parent().index() - 1 ;
    var thindex = obj.parent().index();

    $(obj).closest('table').find('tr').find('td:eq('+ tdindex +'),th:eq('+ thindex +')').fadeOut(500,function(){
        $(this).hide();
    });

}

<col span="1" width="120px" />

<table id="tab">
    <colgroup>
        <col span="1" width="100" />
        <col span="1" width="150" />
        <col span="1" width="150" />
        <col span="1" width="100" />
        </colgroup>
    <tbody>
        <tr>
            ....

table, td {
    border: 1px solid black;
    border-collapse: collapse;
}
table {
    width: 500px;
    table-layout:fixed;
}