如何让表格90%宽度列内的Flexbox横向滚动，其余列固定显示？

我来帮你搞定这个需求！要实现表格第一列内部flex元素横向滚动、第二列"more"固定显示的效果，咱们需要调整关键样式并修正代码里的小问题，具体方案如下：

修正后的完整代码 #

CSS 部分 #

table, th, td { 
  border: 1px solid black; 
  border-collapse: collapse; 
  table-layout: fixed; /* 关键：固定表格布局，让设置的列宽生效 */
  width: 100%; /* 让表格占满容器宽度 */
}
#flex-div { 
  display: flex; 
  flex-wrap: nowrap; /* 强制flex元素不换行，保持横向排列 */
  overflow-x: auto; /* 开启横向滚动 */
  width: 100%; /* 占满父级td的宽度 */
  gap: 8px; /* 可选：给flex元素之间添加间距 */
}
.flex-item { 
  background-color: beige; 
  padding: 30px; /* 修正原代码的空格问题 */
  text-align: center; 
  width: 200px; 
  flex-shrink: 0; /* 关键：防止flex元素被压缩，保留固定宽度 */
}

HTML 部分 #

<table>
  <thead>
    <tr> <!-- 修正原代码的<trow>为正确的<tr>标签 -->
      <th style="width: 90%">Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr> <!-- 修正原代码的<trow>为正确的<tr>标签 -->
      <td>
        <div id="flex-div">
          <div class="flex-item">1</div>
          <div class="flex-item">2</div>
          <div class="flex-item">3</div>
          <div class="flex-item">4</div> <!-- 新增元素方便测试滚动效果 -->
        </div>
      </td>
      <td>more</td>
    </tr>
  </tbody>
</table>

关键改动说明 #

• 表格布局控制：给表格添加table-layout: fixed和width: 100%，确保我们设置的第一列90%宽度不会被内容撑开，第二列自动占据剩余空间。
• 滚动容器设置：给#flex-div添加overflow-x: auto开启横向滚动，flex-wrap: nowrap强制子元素始终横向排列，width: 100%让容器完全占满第一列宽度。
• flex元素固定宽度：给.flex-item添加flex-shrink: 0，避免元素因容器空间不足被压缩，保证每个item都维持200px的宽度。
• 代码错误修正：把原代码里的<trow>改为表格标准标签<tr>，修正padding: 30 px的空格问题（应为30px）。

这样设置后，第一列会占表格90%宽度，内部的flex元素超出宽度时会横向滚动，而右侧的"more"列会始终固定显示，不会跟随滚动~

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