javascript - jQuery Mobile ui 响应表添加额外的标题

Question

使用 jQuery Mobile - 和新的表格 ui 响应类 - 如果视口(viewport)变得太窄，表格应该折叠成一个列。

但是 - 当我拖动浏览器使视口(viewport)变小时，它会采用第一个列标题，并将其添加到表页脚:

视口(viewport)足够宽:

窄视口(viewport):

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

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

为了更好地理解，请参阅更新的 fiddle 链接。 <强> 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>