Question

因此，标题可能有些混乱，所以这里是摘要-

表行必须全部可见，因此当客户端滚动时，他不会滚动表，而是滚动页面本身，以查看其他行
表列必须是可滚动的，因为它们很多，即-溢出-x：滚动
最后，当客户端上下滚动页面以及使用scroll-x滚动浏览器时，表格标头必须保持粘性。

此代码笔显示了表格的外观，但粘性标头除外：
https://codepen.io/anon/pen/Xyqqew

这是CSS

div {
    overflow-x: scroll;
    width: 80%;
}

table {
    white-space: nowrap;
    background-color: darkgrey;
    border: black solid 1px;
    border-collapse: collapse;
}

th,td {
    border: black solid 1px;
}

td {
  background-color: lightblue;
}

这是HTML

<div>
  <table>
    <thead>
      <tr>
        <th>column 1</th>
        <th>column 2</th>
        <th>column 3</th>
        <th>column 4</th>
        <th>column 5</th>
        <th>column 6</th>
        <th>column 7</th>
        <th>column 8</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem ipsum dolor sit amet, consectetur</td>
        <td>adipiscing elit, sed do eiusmod tempor</td>
        <td>incididunt ut labore et dolore</td>
        <td>magna aliqua</td>
        <td>Ut enim ad minim veniam</td>
        <td>quis nostrud exercitation ullamco</td>
        <td>laboris nisi ut aliquip ex ea commodo consequat</td>
        <td>
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
        </td>
      </tr>
      <tr>
        <td>Lorem ipsum dolor sit amet, consectetur</td>
        <td>adipiscing elit, sed do eiusmod tempor</td>
        <td>incididunt ut labore et dolore</td>
        <td>magna aliqua</td>
        <td>Ut enim ad minim veniam</td>
        <td>quis nostrud exercitation ullamco</td>
        <td>laboris nisi ut aliquip ex ea commodo consequat</td>
        <td>
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
        </td>
      </tr>
      <tbody>
  </table>
</div>

我更喜欢使用css和可能的react.js的解决方案，而不是jQuery

带有可滚动x但溢出y的粘滞表标题

0 个答案: