如何将<table>拆分成多个<div>？

Question

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

是否可以在 html 中完成？否则，有没有像js这样的技巧？

Answer 1

查看 jQuery.floatThead（提供演示）非常酷，也可以使用 DataTables，甚至可以在 overflow: auto 容器中工作。

Answer 2

您希望保持可见的第一行应该是 position:fixed 并将其设置在 div top:0 的顶部。现在你的其他列将被 position:fixed 列重叠，所以确保你给你的可滚动 div 一个 padding-top 等于固定列

的高度

Answer 3

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

https://jsfiddle.net/s07w38me/

不需要JavaScript。您可以简单地 position: absolute 每个 th.

中的 div 的内容

例如

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 的一个分支。

如何将<table>拆分成多个<div>？

How to split <table> into multiple <div>?

html

javascript

css

html-table

overflow