jQuery Mobile用户界面响应表添加了额外的标题

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/

这只是Mobile 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>