如何修复表行顶部

Question

我将使用div替换我所使用的表

<div class="div-table">
    <div class="div-table-row">
        <div class="div-table-col">Benefits</div>
    </div>
    <div class="div-table-row">
        <div class="div-table-col">Preferences</div>
    </div>
</div>

使用CSS

.div-table{ display:table; }
.div-table-row{ display:table-row;  }
.div-table-col{ display:table-cell; }

我想修复表行.div- table -row1、.div-table-row2、.div-table-row3 ...等。

这样，在运行时，我就可以通过更改行的样式来重新排列行。这样，如果我只将.div-table-row1赋值给它，首选项就可以出现在第一行。

Answer 1

我担心使用CSS来实现这一点是相当不切实际的(假设我的目标是正确的)。您需要通过改变<div>的位置来移动它们，例如使用position: absolute --再说一次，这没有多大意义。

您可能需要考虑使用JavaScript解决方案。并不是特别推荐jQuery，但是这个jQuery插件非常好用：Tablesorter。

Answer 2

我将回顾一下评论+答案。

1. 问题是表行tr是否可以用CSS重新排列。它们只是采用在html中编码的顺序。
2. 属性display: table、display: table-cell和display: table-row本质上模仿了html table，正如它们的名字所暗示的那样。当然，使用JavaScript可以让available display properties here
3. You实现这一点。以jQuery UI's Sortable为例。

Answer 3

我不清楚你想知道什么，但在我的情况下，我尝试了golovko fixedheader table，它工作得很好，即使是动态表格，除了一些but .If表格是静态的，你可以用css和js来控制表格的高度和宽度。