如何设置HTML表格多列宽度固定 仅保留单列自适应占满剩余宽度

解决方法 #

你只需要修改两处CSS规则即可实现需求：

1. 给.list表格类添加table-layout: fixed属性，开启固定布局模式：

.list {
    border: hidden 1px #e8eef4;
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed; /* 新增这行规则 */
}

2. 修改.labelT的宽度规则，不用手动计算减去的宽度，直接设置width: 100%即可自动占用所有剩余空间：

.labelT {
    width: 100%;
    /* 如果需要限制内容不溢出、显示省略号，可以额外添加以下规则 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

原理说明

table-layout: fixed模式下，表格列宽由第一行单元格的宽度决定：浏览器会优先分配所有设置了固定像素宽度的列的空间，剩余的全部宽度会自动分配给设置了width: 100%的列，不需要手动用calc计算差值，后续如果增减固定宽度的列也无需修改labelT的规则，灵活性更高。

内容的提问来源于stack exchange，提问作者user1531040