jquery - 如何在没有 THEAD 的情况下使用 JQueryMobile 回流响应表？

Question

我想在没有 THEAD 或 THEAD 不占用空间的情况下使用 JQueryMobile 的响应式回流表。用例是我有一些营销 Material ，我想在宽屏幕上分两栏，在小屏幕上分一栏。

一切都很好，除了 JQM 似乎需要 THEAD。作为一种解决方法，我将空白标题 (nbsp) 放入 THEAD，但我想找回浪费的空间。

这是一个演示问题的 jsfiddle:http://jsfiddle.net/reL97/5/

如果你移除 THEAD，它就会坏掉。但是，我想不出减少 THEAD 空间的方法。例如:

#movie-table thead {
    display: none;
}

注意:我不直接放入实际标题的原因是，当回流发生时，标题会占用宝贵的水平空间。我希望这些标题在垂直方向和水平方向上都被删除。

有什么想法吗？谢谢。

Answer 1

Here is your updated FIDDLE

现在是空的:

    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>

CSS 会从标题单元格中移除边距/填充，并在屏幕变窄到回流模式时选择性地更改间距:

#movie-table thead tr th{
    margin: 0;
    padding: 0;
}
@media (max-width: 35em) {
    #movie-table th{
        margin-top: 12px; /* optional spacing during reflow */
    }
}