Question

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

一切都很好，除了看起来JQM需要一个THEAD。作为一种解决方法，我将空白标题（nbsp）放入THEAD中，但我想把这个浪费的空间放回去。

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

如果您移除THEAD，它将会中断。但是，我无法找到减少THEAD空间的方法。例如：

#movie-table thead {
    display: none;
}

注意：我之所以不加上实际标题的原因是，当回流发生时，标题会占用宝贵的水平空间。我希望这些标题可以垂直和水平移除。

有什么想法吗？谢谢。

Answer 1

以下是您更新的 FIDDLE

thead现在是空的：

    <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 */
    }
}

如何在没有THEAD的情况下使用JQueryMobile reflow响应表？

1 个答案: