如何用CSS实现固定最大宽度且可横向滚动的表格？

需求与问题 #

需求 #

• 表格最大宽度限制为400px
• 每列最大宽度不超过300px
• 列内内容尽可能填充列宽（最多到300px）
• 当列总宽度超出表格最大宽度时，表格支持横向滚动

当前问题 #

使用以下CSS后，列内内容无法占满列宽，总是被压缩：

table {
  table-layout: fixed !important;
  width: 400px;
  overflow: auto;
}

th {
  max-width: 300px !important;
}

td {
  max-width: 300px !important;
}

修正后的CSS代码 #

/* 新增滚动容器，实现横向滚动 */
.table-container {
  max-width: 400px;
  overflow-x: auto;
}

table {
  table-layout: auto;
  width: 100%;
  min-width: 100%;
  border-collapse: collapse; /* 可选：合并边框，优化视觉效果 */
}

th, td {
  max-width: 300px;
  width: 100%;
  /* 可选处理长文本：如需换行则启用下面的属性，如需不换行则用white-space:nowrap */
  overflow-wrap: break-word;
  word-break: break-all;
}

关键调整说明 #

1. 滚动容器：表格本身无法直接通过overflow实现滚动，需要在外层包裹一个容器，设置max-width:400px和overflow-x:auto，超出时触发横向滚动
2. 表格布局：将table-layout:fixed改为auto，让浏览器根据内容自动分配列宽，同时width:100%和min-width:100%确保表格在容器内时占满宽度
3. 单元格设置：max-width:300px限制列的最大宽度，width:100%让单元格尽可能填充可用宽度；通过overflow-wrap和word-break处理长文本换行，避免内容被过度压缩

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