Question

我有一个包含5列的表格。

第一列应该是其最宽内容的宽度。

第三，第四和第五列应为固定数量的像素宽。

第二列应填充剩余宽度。内容经常会溢出，但我不希望这会影响列的宽度（我会在该列上用省略号隐藏溢出。）

到目前为止我所拥有的是：

table {
    table-layout: fixed;
}
th:nth-child(3), th:nth-child(4), th:nth-child(5) {
    width: 30px;
}
th:nth-child(2) {
    width: auto;
    overflow: hidden;
}
th:nth-child(1) {
    /* width: ????? */
}

这样做可以成功地使前两列具有相同的宽度。也就是说，拆分剩余的空间。

如何指定第一列＆＃34;获取显示所有内容所需的确切空间量＆＃34;？如果我没有指定＆＃34; table-layout：fixed＆＃34 ;,那么我就无法控制其他列。

Answer 1

我很想找到一种纯粹的css方式来做到这一点，但我最终使用了javascript：

<!-- wrap the text to measure in a span and measure the width of the span -->
<table id="my-table">
    <tr><th>First</th> etc... </tr>
    <tr><td><span class="name-text">Adam</span></td>etc...</tr>
    etc...
</table>

var names = $("#my-table").find(".name-text");
var width = 0;
names.each(function(i, name) {
    var w = parseInt($(name).width());
    width = Math.max(width, w);
});

var th = $("#my-table").find("th:nth-child(1)");
th.css({ width: (width + 10) + "px" });

使用不同列的不同规则控制html表列宽

1 个答案: