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

Question

Using jQuery Mobile - and the new ui-responsive class for a table - the table is supposed to collapse into a single column if the viewport becomes too narrow.

However - when I drag the browser to make the viewport smaller, it takes the first column heading, and adds it to the table footer:

Viewport wide enough:

Narrow Viewport:

My HTML markup is:

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

I've added a demo to jsFiddle here: http://jsfiddle.net/mtait/44k3E/2/

Is this just a bug in the Mobile CSS - or is it known, and is there a work around?

Thank you,

Mark

Answer 1

It is not adding extra header. This is the way in which it works. It will put the heading above each column values when its width reduces.

For better understanding refer to the updated fiddle link. 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>