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>