Question

我正在使用大量数据表（许多行很多列）。我选择使用的解决方案是将我的表放入overflow:scoll div。我希望能够在向下滚动时看到第一行。

是否可以在html中执行此操作？否则，是否有像js技巧那样的技巧？

Answer 1

查看jQuery.floatThead（可用的演示版）非常酷，也可以使用DataTables，甚至可以在溢出：自动容器内工作。

Answer 2

您希望保持可见的第一行应为position:fixed，并将其设置为该div top:0的顶部。现在，您的其他列将与position:fixed列重叠，因此请确保您的可滚动div为padding-top等于固定列的高度

Answer 3

我假设你想要这样的东西？

https://jsfiddle.net/s07w38me/

确实没有JavaScript。您可以简单地position: absolute th内的div的内容。

e.g。

<强> CSS

th div {
  position: absolute;
  background: transparent;
  color: #fff;
  padding: 9px 25px;
  top: 0;
  margin-left: -25px;
  line-height: normal;
  border-left: 1px solid #800;
}

<强> HTML

<table>
      <thead>
        <tr class="header">
          <th>
            Table attribute name
            <div>Table attribute name</div>
          </th>
          <th>
            Value
            <div>Value</div>
          </th>
          <th>
            Description
            <div>Description</div>
          </th>
        </tr>
      </thead>
      <!-- ...etc... -->

PS：这可以做很多更好，但上面这个例子是一个基于我发现的现有JSfiddle的分支。

如何拆分成多个<div>？

3 个答案: