css响应式表格列宽自适应技巧

使用 table-layout: fixed 配合 width: 100% 和 word-wrap: break-word 可实现基础响应式表格；对于更复杂场景，推荐采用 Grid 或 Flex 布局模拟表格，通过 fr 单位或 flex: 1 控制列宽，并结合媒体查询在小屏下隐藏非关键列或转为堆叠布局，提升移动端可读性。

在响应式设计中，表格的列宽自适应是一个常见挑战。尤其是在小屏幕上，固定宽度的表格容易出现横向滚动或内容挤压的问题。要让CSS实现响应式表格列宽自适应，关键在于合理使用布局方式和属性控制。

使用 table-layout: fixed

默认情况下，表格采用自动布局（table-layout: auto），列宽由内容决定，容易导致不均衡。设置 table-layout: fixed 可以让列宽根据容器分配，而不是内容长度。

• 配合 width: 100% 让表格占满父容器
• 列宽将更均匀，避免某列因内容过长而撑开
• 结合 word-wrap: break-word 防止长文本溢出

示例代码：

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
td, th {
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
}

用 flex 或 grid 模拟表格布局

对于复杂响应式需求，传统

.table {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 1px;
  background: #ddd;
}
.row {
  display: contents;
}
.cell {
  padding: 8px;
  background: white;
}

@media (max-width: 600px) {
  .hide-on-mobile {
    display: none;
  }
}