如何仅在 CSS 中滚动表格（水平/宽度）

Posted 2023-03-06

【中文标题】如何仅在 CSS 中滚动表格（水平/宽度）

【英文标题】：How to scroll table only in css (horizontal/width)

【发布时间】：2021-11-27 13:24:52

【问题描述】：

我可能不是第一个提出这个问题的人，但我在任何地方都找不到可行的解决方案。

这是我页面的一个极其简化的版本

<table style="white-space:nowrap;font-size:30px"><tr><td style="background-color:blue">SIDE NAV SIDE NAV</td><td>
  <table style="overflow-y:auto">
  <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>   </td></tr></table>

现在我希望只有 table 应该滚动。侧导航应始终可见。

我也尝试使用flex 代替table 的div 版本，但存在同样的问题。

这里是div 版本

<div style="white-space:nowrap;display:flex;font-size:30px"><div style="background-color:blue">SIDE NAV SIDE NAV</div><div>
  <table style="overflow-y:auto">
  <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>

如果我将硬编码的固定宽度放在表格中，那么它可以正常工作。但我当然不想要一个固定的宽度。它必须适用于任何尺寸的屏幕/浏览器。

如何做到这一点？

FWIW：这里是 codepen 中的 2 个版本

表：https://codepen.io/yisman/pen/LYLKzbw

div：https://codepen.io/yisman/pen/GREbMON

谢谢

【参考方案1】：

我不知道你的意思，但希望它可以帮助你。

.container 
  width: 100%;
  overflow: scroll;

.sidebar 
  position: sticky;
  top: 0;
  left: 0;

<div class="container" style="white-space:nowrap;display:flex;font-size:30px"><div class="sidebar" style="background-color:blue">SIDE NAV SIDE NAV</div><div>
  <table style="overflow-y:auto">
  <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>

【讨论】：

嗨。感谢您的时间和投入。我感谢你的努力。但它仍然感觉有点hacky。因为滚动条位于页面底部。不是桌子。 （表格可能比整页短）并且对用户来说不是那么直观。有更好的主意吗？