固定向左水平滚动 div

Question

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

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

Answer 1

如果您使用的是 table，要使其可滚动，请将其放置在带有溢出的 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>

固定向左水平滚动 div

scrolling horizontally with fixed left div

html

javascript

css

jquery

css-position