如何仅用CSS实现表格横向滚动且侧边栏固定显示

你遇到的是Flex布局子项的默认宽度特性问题：Flex容器的直接子项默认min-width: auto，会优先按照自身内容宽度撑开容器，导致溢出属性无法生效。只需调整容器属性即可实现自适应滚动效果，无需硬编码固定宽度。

可用实现代码（Flex版本） #

<div style="display:flex;font-size:30px;width:100%">
  <!-- 侧边导航，全程固定可见 -->
  <div style="background-color:blue;white-space:nowrap;">SIDE NAV SIDE NAV</div>
  <!-- 表格容器，配置滚动属性 -->
  <div style="overflow-x:auto;min-width:0;flex:1;">
    <table style="white-space:nowrap;width:100%">
      <thead>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Job Title</th>
          <th>Twitter</th>
          <th>Comment</th>       
        </tr>
      </thead>
      <tbody>
        <tr>
          <td data-column="First Name">James</td>
          <td data-column="Last Name">Matman</td>
          <td data-column="Job Title">Chief Sandwich Eater</td>
          <td data-column="Twitter">@james</td>
          <td>Jack and jill wen up the hill</td>
        </tr>
        <tr>
          <td data-column="First Name">Andor</td>
          <td data-column="Last Name">Nagy</td>
          <td data-column="Job Title">Designer</td>
          <td data-column="Twitter">@andornagy</td>
          <td>Jack and jill wen up the hill</td>
        </tr>
        <tr>
          <td data-column="First Name">Tamas</td>
          <td data-column="Last Name">Biro</td>
          <td data-column="Job Title">Game Tester</td>
          <td data-column="Twitter">@tamas</td>
           <td>Jack and jill wen up the hill</td>
        </tr>
        <tr>
          <td data-column="First Name">Zoli</td>
          <td data-column="Last Name">Mastah</td>
          <td data-column="Job Title">Developer</td>
          <td data-column="Twitter">@zoli</td>
          <td>Jack and jill wen up the hill</td>
        </tr>
        <tr>
          <td data-column="First Name">Szabi</td>
          <td data-column="Last Name">Nagy</td>
          <td data-column="Job Title">Chief Sandwich Eater</td>
          <td data-column="Twitter">@szabi</td>
          <td>Jack and jill wen up the hill</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

关键配置说明 #

• 外层Flex容器设置width: 100%，占满父级可用宽度
• 侧边栏无需额外宽度配置，由自身内容自动撑开，始终固定可见
• 包裹内部表格的容器配置三个核心属性：
  • flex: 1：自动占满侧边栏之外的所有剩余宽度
  • min-width: 0：覆盖Flex子项默认的min-width: auto行为，允许容器宽度小于内容宽度
  • overflow-x: auto：内容超出容器宽度时自动显示横向滚动条
• 内部表格设置white-space: nowrap保证单元格内容不换行，宽度由内容自动撑开

如果需要使用外层Table布局的版本，只需给包裹内部表格的td元素设置overflow-x: auto; display: block; width: 100%即可，实现逻辑一致。

内容的提问来源于stack exchange，提问作者Yisroel M. Olewski