修复在IE和Safari中删除列后表格列宽(使用colgroup)不起作用的问题
我有一个带有标记的表，如下所示
<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>这些列在每个浏览器中都有固定的宽度(正如我所希望的)。但是当我删除一个特定的列时(使用jQuery功能的一部分)，colgroup的列宽度在Chrome和Firefox中保持不变，但在Internet Explorer和Safari中却没有。
要删除特定列，请使用jQuery：
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();
});
}我尝试了所有可能的解决方案-从分配宽度到td和th，到删除列而不是隐藏，可见性折叠等，但似乎都不起作用。
看看这个：Why does Internet Explorer 9/10 ignore column widths when using colspan?
回答 2
Stack Overflow用户
发布于 2014-05-19 17:20:01
在您的示例中，列被赋予了固定的宽度，但表布局却没有。如果表布局不是fixed，则列将增长以填充从最后一个开始的剩余部分。
您需要为表提供table-layout: fixed以支持宽度。
演示__：
HTML
<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>
....CSS
table, td {
border: 1px solid black;
border-collapse: collapse;
}
table {
width: 500px;
table-layout:fixed;
}重要提示:如果删除任何列，下一列将采用colgroup宽度，因为列索引现在将转移到下一列。也就是说，当您删除第三列时，第四列将占据其索引位置，因此将应用应用于该索引的宽度。
注意:最好通过CSS指定width，而不是将其指定为属性。
更新
事实上，如果表width被设置为auto，那么IE就会按照它应该的方式运行。Chrome扩展了列！
演示2：
如果删除了整个colgroup，并且只在第一行的列上指定了宽度，那么它在IE和Chrome中都能正常工作。
演示3：
Stack Overflow用户
发布于 2014-05-19 16:35:38
<col span="1" width="120px" />宽度属性不应该有任何单位(px)。
此属性在HTML5中也不可用，请改用css。
https://stackoverflow.com/questions/23733118
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号