Question

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

<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的col宽度在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＆s，以及删除列而不是隐藏，可见性 - 崩溃等，但似乎没有任何效果。

检查出来：Why does Internet Explorer 9/10 ignore column widths when using colspan?

Answer 1

在您的情况下，列的宽度是固定的，但表格布局不是。如果表格布局不是fixed，则列将增长以填充上一个的剩余部分。

您需要在表格中提供table-layout: fixed才能兑现宽度。

演示 ：http://jsfiddle.net/abhitalks/3fyLN/3/

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宽度，因为列索引现在将转移到下一列。即，当您删除第3列时，第4列将采用其索引位置，因此应用于该索引的宽度将适用。

注意：最好通过CSS而不是属性来指定宽度。

<强>更新：

实际上，如果表width设置为auto，那么IE就是它应该表现的方式。 Chrome扩展了列！

演示2：http://jsfiddle.net/abhitalks/3fyLN/5/

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

演示3：http://jsfiddle.net/abhitalks/3fyLN/6/

Answer 2

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

width属性不应包含任何单位（px）。

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

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

2 个答案: