1

jQuery Mobile とテーブルの新しい ui-responsive クラスを使用すると、ビューポートが狭くなりすぎると、テーブルが 1 つの列に折りたたまれます。

ただし、ブラウザーをドラッグしてビューポートを小さくすると、最初の列見出しが取得され、テーブル フッターに追加されます。

十分な広さのビューポート:

前

狭いビューポート:

後

私の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 のバグですか? それとも既知のもので、回避策はありますか?

ありがとうございました、

マーク

4

1 に答える 1

1

余分なヘッダーを追加していません。これがその仕組みです。幅が狭くなると、各列の値の上に見出しが表示されます。

理解を深めるには、更新されたフィドル リンクを参照してください。デモ

    <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>
于 2013-08-30T13:38:45.827 に答える