javascript - jQuery Mobile ui-responsive table 添加额外的标题

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

它没有添加额外的标题。这就是它的工作方式。当宽度减小时，它将把标题放在每列值的上方。

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

    <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>