0

私は製品のデータを表示するために JQuery Mobile を使用しています。次のような人です。

<table data-role="table" id="products-vip" data-column-btn-theme="b" data-column-popup-theme="a" data-mode="columntoggle" class="ui-responsive" data-column-btn-text="See">
        <thead>            
           <tr>
                <-- <th> with table heads -->
            </tr>
        </thead>
        <tbody>

            @foreach(Product in Model)
            {
                <tr>
                    <-- <td> with info of Products-->
               </tr>
            }
        </tbody>
</table>

テーブルは「columntoggle」です。

私の問題は、セルのコンテンツが画面の幅を超えていることです。たとえば、iOS ブラウザーでは、JQuery Mobile はコンテンツを切り捨て、ページを左または右に移動してコンテンツを表示できません。

コンテンツを切り捨てず、テーブルをレスポンシブにする、またはワードラップが示されているセルを作成するJQuery Mobileにどのように言えますか。

ありがとう！...

4

1 に答える 1

1

テーブルを div 内に配置し、テーブルが div の境界を超えたときに div がスクロールできるようにします。

<div class="tableWrapper">
    <table data-role="table" id="products-vip" data-column-btn-theme="b" data-column-popup-theme="a" data-mode="columntoggle" class="ui-responsive table-stroke" data-column-btn-text="See">
            <thead>            
               <tr>
                   <th>Col 1</th>
                   <th>Col 2</th>
                   <th>Col 3</th>
                   <th>Col 4</th>
                </tr>
            </thead>
            <tbody>
                    <tr>
                       <td>Col 1 Row 1 content</td>
                       <td>Col 2 Row 1 content</td>
                       <td>Col 3 Row 1 content</td>
                       <td>Col 4 Row 1 content</td>
                   </tr>
            </tbody>
    </table>
</div>

CSS:

.tableWrapper {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

列の内容は自動的に複数の行に折り返され、列が縮小できなくなるまでテーブルは div 内に留まります。その時点で、テーブルは div よりも広くなり、スクロールバーが表示されます。

デモ

于 2015-03-26T14:36:20.607 に答える