我正在使用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>
该表是&#34; columntoggle&#34;。
我的问题是单元格的内容超出了屏幕的宽度,例如,在iOS浏览器中,JQuery Mobile会截断内容,不允许将页面向左或向右移动以查看内容。 / p>
如何向JQuery Mobile说明不截断内容,使表格响应,或者指示单词的单元格。
谢谢!......
答案 0 :(得分: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宽,并且滚动条出现。
<强> DEMO 强>