CSS实现表格无换行可变列自适应占用剩余可用空间

核心思路是启用表格固定布局模式，让表格严格遵守容器宽度限制，仅让可变宽度列自动分配剩余空间，无需修改原有JS逻辑。

核心修改点 #

• 给table元素添加table-layout: fixed属性，强制表格使用固定布局规则，总宽度不会被单元格内容撑大
• 移除可变列原有的width: 99%设置，改为width: auto，让其自动占用所有剩余水平空间
• 给固定列添加min-width约束，保证固定列不会被压缩
• 统一设置盒模型为border-box、合并表格边框，避免边框、内边距导致宽度溢出

完整可用代码 #

CSS部分（替换原有CSS即可） #

.variCol {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: top;
    background-color: yellow;
}
.fixedCol{
    width:150px;
    min-width: 150px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
}
table{
    width:100%;
    table-layout: fixed;
    border-collapse: collapse;
    height:200px;
    border:1px solid black;
}
#myButton{
    background-color:lightgray;
    cursor:pointer;
    padding: 2px 8px;
    display: inline-block;
    margin-top: 8px;
}
#tableContainer{
    width:700px;
    max-width: 100%;
    height:300px;
    border:1px solid black;
    padding: 8px;
    box-sizing: border-box;
}
td {
    padding: 4px 8px;
    border: 1px solid #eee;
    box-sizing: border-box;
}

JS/HTML部分 #

原有JS和HTML逻辑无需修改，点击「Add Column」按钮新增列时，可变列会自动收缩宽度，表格始终不会超出容器范围。

原理说明 #

• 默认表格使用table-layout: auto自动布局，浏览器会遍历所有单元格内容计算最小宽度，当总宽度超出设定值时会自动撑大表格，导致溢出容器
• 启用table-layout: fixed后，表格总宽度严格等于设置的width值，列宽按照设定值分配：设置了固定宽度/最小宽度的列会占用对应宽度，剩余空间全部分配给宽度为auto的可变列
• 新增固定列时，固定列占用的总宽度增加，可变列分配到的剩余空间自动减少，实现自动收缩效果，配合white-space: nowrap和overflow: hidden保证可变列内容不换行、不撑宽单元格
• 该方案不限制可变列的位置，无论可变列在表格的哪一列，都能正常实现自动伸缩效果

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