jQuery Mobile ui-responsive表添加额外的标头

Question

使用jQuery Mobile - 以及表的新ui响应类 - 如果视口变得太窄，该表应该折叠成单个列。

然而 - 当我拖动浏览器以使视口变小时，它会占用第一列标题，并将其添加到表格页脚：

视口宽度足够：

窄视口：

我的HTML标记是：

        <table data-role="table" class="ui-responsive">
        <thead>
            <tr class="ui-bar-b">
                <th>Column Header 1</th>
                <th>Column Header 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <select></select>
                </td>
                <td>
                    <select></select>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2" style="text-align:center;">
                    <button data-icon="plus">Add</button>
                </td>
            </tr>
        </tfoot>
    </table>

我在这里为jsFiddle添加了一个演示：http://jsfiddle.net/mtait/44k3E/2/

这只是移动CSS中的一个错误 - 或者它是否已知，是否有解决方法？

谢谢，

标记

Answer 1

它没有添加额外的标头。这是它的工作方式。当宽度减小时，它会将标题置于每个列的上方。

为了更好地理解，请参阅更新的小提琴链接。的 DEMO

    <table data-role="table" class="ui-responsive">
        <thead>
            <tr class="ui-bar-b">
                <th>Column Header 1</th>
                <th>Column Header 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <select></select>
                </td>
                <td>
                    <select></select>
                </td>
            </tr>
            <tr>
                <td>
                    <select></select>
                </td>
                <td>
                    <select></select>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>
                    <button data-icon="plus">Add</button>
                </td>
                 <td>
                    <button data-icon="plus">Add</button>
                </td>
            </tr>
        </tfoot>
    </table>