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

【问题标题】：How do I use a JQueryMobile reflow responsive table without a THEAD?如何在没有 THEAD 的情况下使用 JQueryMobile 回流响应表？
【发布时间】：2013-12-19 17:33:45
【问题描述】：

我想在没有 THEAD 或 THEAD 不占用空间的情况下使用 JQueryMobile 的响应式回流表。用例是我有一些营销材料，我想在宽屏幕上显示为两列，在小屏幕上显示为单列。

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

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

如果您移除 THEAD，它会损坏。但是，我想不出减少 THEAD 空间的方法。例如：

#movie-table thead {
    display: none;
}

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

有什么想法吗？谢谢。

【问题讨论】：

标签： jquery css jquery-mobile

【解决方案1】：

这是您更新的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 */
    }
}

【讨论】：