jQuery Mobile ui-responsive table adding extra header

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>