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

Posted 2023-03-05

【中文标题】用不同的规则为不同的列控制 html 表格的列宽

【英文标题】：Controlling html table column widths with different rules for different columns

【发布时间】：2016-11-04 10:54:06

【问题描述】：

我有一个有 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: ????? */

这样做是成功地使前两列具有相同的宽度。即分割剩余空间。

如何为第一列指定“占用显示所有内容所需的确切空间量”？如果我没有指定“table-layout：fixed”，它会这样做，但是我无法控制其他列。

【问题讨论】：

作为一种解决方法，在您的第三列中创建了一个表格来保存其余三列。检查codepen 链接。有帮助吗？

感谢您的建议。不过，我正在使用数据表进行排序，因此我需要将 html 作为一个普通表。

【参考方案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" );