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

我会回顾一下评论+回答。

问题是表格行tr是否可以用CSS重新排列。它们只是采用html编码的顺序。
属性display: table，display: table-cell和display: table-row基本上模仿了名称所暗示的html table。请参阅available display properties here
您当然可以使用JavaScript实现此目的。例如，查看jQuery UI's Sortable。

Answer 3

我没有得到你想要清楚的知识，但在我的情况下，我尝试golovko fixedheader table并且即使使用动态表也可以正常工作，除了一些错误。如果表是静态的，你只能用css做和js控制桌子的高度和宽度。

如何修复表行顶部

3 个答案: