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>

该表是“列切换”。

我的问题是单元格的内容超出了屏幕的宽度，例如，在 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 回答