Javascript jQuery移动用户界面响应表添加额外标头

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

列标题1
列标题2
添加

我在这里向JSFIDLE添加了一个演示：

这只是移动CSS中的一个bug吗？或者它是已知的，有解决方法吗

谢谢,

---

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

为了更好地理解，请参阅更新的fiddle链接

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

列标题1
列标题2
添加
添加

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

为了更好地理解，请参阅更新的fiddle链接

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

列标题1
列标题2
添加
添加

这是它应该如何工作的-标题放在每行的列上方（显示单元格中的数据是该列的一部分）-您应该从表中取出add按钮并将其放在div中，因为它不是表格数据的一部分。这是它应该如何工作的-标题放在每行的列上方（显示单元格中的数据是该列的一部分）-您应该将add按钮从表中取出，并将其放入div中，因为它不是表格数据的一部分