如何在全宽表格中设置指定列固定宽度

你当前的CSS已经设置了table-layout: fixed和width: 100%，这是实现固定列宽的关键基础，在此之上只需补充以下设置即可达成需求：

1. 给目标列的表头和单元格设置固定宽度 #

直接为第一列的<th>和<td>添加宽度样式，确保它始终保持50px：

/* 针对第一列的表头和单元格 */
table thead tr th:first-child,
table tbody tr td:first-child {
  width: 50px;
  /* 可选：防止内容溢出撑宽列，根据需求添加 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

2. 其余列自动分配剩余空间 #

因为你已经设置了table-layout: fixed，表格会优先遵循指定的列宽，剩余的空间会自动分配给未指定宽度的列。如果需要调整某几列的分配比例，也可以给它们设置width: auto或具体百分比，默认情况下未指定宽度的列会自动填充剩余空间。

完整CSS示例 #

结合你现有的代码，完整样式如下：

table {
  border-spacing: 0;
  border: 1px solid $border;
  border-radius: 5px;
  table-layout: fixed;
  width: 100%;
}

/* 固定第一列宽度 */
table thead tr th:first-child,
table tbody tr td:first-child {
  width: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 可选：给单元格添加内边距，优化视觉效果 */
table th, table td {
  padding: 8px 12px;
  border-bottom: 1px solid $border;
}

注意事项 #

• table-layout: fixed必须保留，它会让表格按照指定列宽渲染，而非根据内容自动调整，这是固定列宽的核心。
• 如果第一列内容过长，建议添加溢出处理样式，避免内容撑破固定宽度。

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