如何设置表格首列占视口50%宽度 其余td应用white-space:nowrap

原有代码问题 #

• 给.row（即<tr>元素）设置display: table会把每一行拆分为独立的表格上下文，导致列宽无法跨所有行统一计算，table-layout规则完全失效
• 重复在表格、行、单元格多层设置table-layout、width属性，宽度计算基准混乱
• 滚动属性直接挂载在表格元素上，导致第一列50%宽度的计算基准不是可见视口，而是整个表格的总宽度，不符合预期

修正后完整代码 #

/* 外层滚动容器：作为可见视口基准，承载横向滚动逻辑 */
.table-container {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.table {
  border-collapse: collapse;
  border-spacing: 0;
  /* 自动布局模式下，未指定宽度的列自动适配内容宽度 */
  table-layout: auto;
  width: 100%;
}

.row td {
  padding: 12px 24px;
  line-height: 1.7;
}

/* 保留原有斑马纹样式 */
.row:nth-child(2n) {
  background: #333333;
}
.row:nth-child(2n + 1) {
  background: #2a2a2a;
}

/* 第2、3列强制单行显示，宽度适配内容 */
.row td:not(:first-child) {
  white-space: nowrap;
}

/* 第一列宽度固定为可见区域的50%，允许内容自动换行 */
.row td:first-child {
  width: 50%;
  white-space: normal;
}

<div class="table-container">
  <table class="table">
    <tbody>
      <tr class="row">
        <td>foo</td>
        <td>bar aoidc oaicd oica dij aoidc oaicd oica dij</td>
        <td>baz aoidc oaicd oica dij aoidc oaicd oica dij</td>
      </tr>
      <tr class="row">
        <td>foo</td>
        <td>bar aoidc oaicd oica dij aoidc oaicd oica dij</td>
        <td>baz aoidc oaicd oica dij aoidc oaicd oica dij</td>
      </tr>
      <tr class="row">
        <td>foo</td>
        <td>bar aoidc oaicd oica dij aoidc oaicd oica dij</td>
        <td>baz aoidc oaicd oica dij aoidc oaicd oica dij</td>
      </tr>
    </tbody>
  </table>
</div>

核心逻辑说明 #

• 新增独立外层容器作为宽度计算基准，宽度匹配父容器可见区域，横向滚动逻辑放在外层容器上，避免表格自身宽度计算和滚动逻辑冲突
• 删除所有给行元素设置的display: table、独立table-layout属性，保证整表处于统一的表格布局上下文，列宽可以跨所有行统一计算
• 表格使用table-layout: auto布局规则：指定了宽度的第一列会严格按照可见区域50%的比例渲染，未指定宽度的第2、3列会自动取列内最宽单元格的内容宽度作为列宽
• 仅对非第一列的单元格设置white-space: nowrap，保证后两列内容始终单行完整显示，第一列保留自动换行规则
• 当后两列总宽度超出剩余可见区域时，外层容器会自动出现横向滚动条，不影响第一列的宽度占比

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