Question

我有一个带有粘性列的表（参见下面的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

Answer 1

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

.headcol {
position:fixed;
}

tbody垂直滚动与粘性列

1 个答案: