Question

我通常通过CSS设置固定的列宽，并且结果完美无缺：

#tableID thead tr th:nth-child(1){width: 75px;} 
#tableID thead tr th:nth-child(2){width: 75px;}
/* etc… */

但是现在我处于一种情况，直到运行时我都不知道所需的列宽。以下是我用于动态设置列宽的代码的摘录：

var tr=$("<tr>");
var colArr=Home.ColDefs[this.statBatchType].colArr;
for(var i=0;i<colArr.length;i++){
    var col=colArr[i];
    tr.append(
        $("<th>")
            .html(col.title)
            .css("width",col.width)
    );
}
this.jqTHead.append(tr);

对不起，这段代码有点脱离了上下文，但最重要的是我正在将由<th>元素表示的列添加到表格标题并设置每个宽度。

然而，实际上发生的事情是，Firefox将列宽作为最小值，然后在用户展开浏览器窗口时自动扩展列宽。考虑一下我的JavaScript代码将每列的宽度设置为75px的情况。 Firefox将确保每列的宽度至少为75px，但如果用户最大化（或放大）浏览器，只要有足够的空间，每列将自动加宽。

这对我来说很奇怪，因为JavaScript代码似乎与我在CSS中所做的相同。然而，CSS方法不会导致这种奇怪的行为。

有什么想法吗？

Answer 1

修复<table>的宽度，这样可以确保表格不会占用可用尺寸并突破布局。

Answer 2

表中的

table-layout: fixed;就是这样的：列永远不会扩展以适应它们的内容，如果你给表本身一个宽度，额外的空间将被平分。细胞的内容根本没有发挥作用。

将列强制为固定宽度;防止自动展开<table> </table>

2 个答案: