根据屏幕宽度在桌面上留下的保证金，使用滚动条

Question

我的屏幕左侧有一个带有员工姓名的粘性表列。还有一个旁边有滚动条的大桌子。

我的想法是当我向右滚动以查看大表的内容时，我的带有名称的粘性表列将表推向右侧。

通过这种方式，我对屏幕左侧的名称有了很好的概述，并且它与我的桌子没有重叠。

似乎无法让它正常工作，有人有什么建议吗？

Answer 1

如果您希望实现 Excel固定列的效果：

这样做：

.table-wrapper { 
    overflow-x:scroll;
    overflow-y:visible;
    width:250px;
    margin-left: 120px;
}

td, th {
    padding: 5px 20px;
    width: 100px;
}

th:first-child {
    position: fixed;
    left: 5px
}

Working Demo

Answer 2

使用Bootstrap。

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-xs-2">Left side</div>
  <div class="col-xs-10">
    <div class="table-responsive">
      <table class="table">
        <thead>
          <th>TH1</th>
          <th>TH2</th>
          <th>TH3</th>
          <th>TH4</th>
          <th>TH5</th>
          <th>TH6</th>
          <th>TH7</th>
          <th>TH8</th>
          <th>TH9</th>
          <th>TH10</th>
          <th>TH11</th>
          <th>TH12</th>
        </thead>
        <tbody>
          <td>TD1</td>
          <td>TD2</td>
          <td>TD3</td>
          <td>TD4</td>
          <td>TD5</td>
          <td>TD6</td>
          <td>TD7</td>
          <td>TD8</td>
          <td>TD9</td>
          <td>TD10</td>
          <td>TD11</td>
          <td>TD12</td>
        </tbody>
        <tfoot>
          <th>TH1</th>
          <th>TH2</th>
          <th>TH3</th>
          <th>TH4</th>
          <th>TH5</th>
          <th>TH6</th>
          <th>TH7</th>
          <th>TH8</th>
          <th>TH9</th>
          <th>TH10</th>
          <th>TH11</th>
          <th>TH12</th>
        </tfoot>
      </table>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

此示例位于版本3中，但您可以使用新版本（v4）。