使用固定的左 div 水平滚动答案

【问题标题】：scrolling horizontally with fixed left div使用固定的左 div 水平滚动
【发布时间】：2015-05-26 17:41:40
【问题描述】：

我正在寻找一种在 div 视图中水平滚动的方法，左侧边栏是固定的。所以当有滚动（水平）时，所有的东西都会消失在这个侧边栏后面。为了显示：我不知道如何精确地做到这一点。这只能通过 CSS 还是与 Javascript 结合使用？如果有，具体是怎样的？

这是[到目前为止我的工作小提琴] ssss(http://jsfiddle.net/justamir/fp2xgqL5/)

【问题讨论】：

请修复链接。
链接到example.com的东西给小提琴链接
对不起，我刚刚更新了我的小提琴

标签： javascript jquery html css css-position

【解决方案1】：

如果您使用的是表格，为了使其可滚动，您可以将其放置在带有溢出的 div 中。如果你想要一个修复列，它必须放在溢出的 div 之外。你最终会得到这样的布局：

.scrollable {
  width: 100px;
  overflow: auto;
}
.fixed,
.scrollable {
  float: left;
}

<table class="fixed">
  <tr>
    <th>FIXED</th>
  </tr>
  <tr>
    <td>val1</td>
  </tr>
  <tr>
    <td>val2</td>
  </tr>
  <tr>
    <td>val3</td>
  </tr>
  <tr>
    <td>val4</td>
  </tr>
</table>
<div class="scrollable">
  <table>
    <tr>
      <th>col1</th>
      <th>col1</th>
      <th>col1</th>
      <th>col1</th>
      <th>col1</th>
      <th>col1</th>
    </tr>
    <tr>
      <td>val1</td>
      <td>val1</td>
      <td>val1</td>
      <td>val1</td>
      <td>val1</td>
      <td>val1</td>
    </tr>
    <tr>
      <td>val2</td>
      <td>val2</td>
      <td>val2</td>
      <td>val2</td>
      <td>val2</td>
      <td>val2</td>
    </tr>
    <tr>
      <td>val3</td>
      <td>val3</td>
      <td>val3</td>
      <td>val3</td>
      <td>val3</td>
      <td>val3</td>
    </tr>
    <tr>
      <td>val4</td>
      <td>val4</td>
      <td>val4</td>
      <td>val4</td>
      <td>val4</td>
      <td>val4</td>
    </tr>
  </table>
</div>

【讨论】：