HTML表格布局问题：首列固定100px其余列等宽自适应

你遇到的问题根源在于列宽规则的冲突：你给所有td设置了width:50%，但表格实际有3列，这个百分比设置会和首列的固定宽度100px打架，再加上table-layout:fixed的渲染逻辑（优先以第一行单元格的宽度为准），导致你的宽度设置被浏览器忽略了。

下面是修正后的完整代码，完美实现首列100px固定、其余列均分剩余宽度的需求：

<style>
table { 
  border: 1px solid green; 
  table-layout: fixed; 
  width: 100%; 
}
td, th { 
  border: 1px solid grey; 
}
/* 首列固定宽度，同时覆盖表头和数据列 */
th:nth-child(1), td:nth-child(1) { 
  width: 100px; 
  border-color: gold; 
}
/* 其余列均分剩余宽度 */
th:nth-child(n+2), td:nth-child(n+2) {
  width: calc((100% - 100px) / 2);
}
</style>
<table> 
<tr> 
<th>Firstname</th> 
<th>Lastname</th> 
<th>Age</th> 
</tr> 
<tr> 
<td>Jill</td> 
<td>Smith</td> 
<td>50</td> 
</tr> 
<tr> 
<td>Eve</td> 
<td>Jackson</td> 
<td>94</td> 
</tr> 
</table>

关键说明： #

• 保留table-layout: fixed：这个属性是实现固定列宽的核心，它让浏览器按预先定义的宽度渲染表格，而非根据内容自适应，避免首列被内容撑开。
• 移除全局td { width:50% }：这个规则会覆盖首列的固定宽度，且不符合3列的布局逻辑。
• 使用calc()计算剩余列宽：(100% - 100px) / 2确保剩下的两列精确平分表格的剩余宽度，完全自适应容器大小。
• 同时设置th和td的宽度：因为table-layout: fixed会优先参考第一行（表头）的宽度，所以表头和数据列的宽度规则要统一，避免布局混乱。

如果你的列数不固定，也可以用更通用的写法：不给其余列设置具体宽度，只固定首列，浏览器会自动把剩余宽度均分所有非首列的列，效果一致且代码更简洁：

/* 列数不固定时的替代写法 */
th:nth-child(n+2), td:nth-child(n+2) {
  width: auto;
}

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