带有粘性列的 tbody 垂直滚动答案

【问题标题】：tbody vertical scroll with sticky column带有粘性列的 tbody 垂直滚动
【发布时间】：2017-05-24 00:21:53
【问题描述】：

我有一个带有粘性列的表格（请参阅下面的 jsfiddle）。但我试图在表格主体上进行垂直滚动，以便标题始终可见并且 tbody 的高度应该是固定的。我该怎么做？

        body {
          font: 16px Calibri;
        }
        
        table {
          border-collapse: separate;
          border-top: 3px solid grey;
        }
        
        td,th {
          margin: 0;
          border: 3px solid grey;
          border-top-width: 0px;
          white-space: nowrap;
        }
        
        div {
          width: 600px;
          overflow-x: scroll;
          margin-left: 5em;
          overflow-y: visible;
          padding-bottom: 1px;
        }
        
        .headcol {
          position: absolute;
          width: 5em;
          left: 0;
          top: auto;
          border-right: 0px none black;
          border-top-width: 3px;
          /*only relevant for first row*/
          margin-top: -3px;
          /*compensate for top border*/
        }
        
        .long {
          background: yellow;
          letter-spacing: 1em;
        }

<div>
  <table>
    <thead>
      <tr>
        <th class="headcol">sticky col</th>
        <th>col2</th>
        <th>col3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="headcol">1</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
      <tr>
        <td class="headcol">2</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
      <tr>
        <td class="headcol">3</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
      <tr>
        <td class="headcol">4</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
      <tr>
        <td class="headcol">5</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
      <tr>
        <td class="headcol">6</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
      <tr>
        <td class="headcol">7</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
      <tr>
        <td class="headcol">8</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
      <tr>
        <td class="headcol">9</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
    </tbody>
  </table>
</div>

最终结果应该是这样的： http://demos.telerik.com/kendo-ui/grid/frozen-columns

【问题讨论】：

标签： html css

【解决方案1】：

您需要将您希望在垂直滚动期间保持固定的单元格的位置设置为固定。

.headcol {
position:fixed;
}

【讨论】：