我有一个Bootstrap表格,我正在尝试使其更加“移动友好”。所有我尝试过的方法都看起来很糟糕。我好奇大多数人是如何使他们的表格在移动设备上看起来不错,但在计算机或平板电脑上正常打开。
我的示例表格:
<div class="col-lg-12">
<table id="example" class="table table-bordered table-striped table-responsive">
<thead>
<tr>
<th>Pay</th>
<th>Print</th>
<th>Year</th>
<th>Property Id</th>
<th>Name/Location</th>
<th>Status</th>
<th>Amount Paid</th>
<th>Date Paid</th>
<th>Due</th>
<th>Pin</th>
<th>Box</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Table cell</td>
<td><button class="btn btn-warning btn-xs">Print Bill</button><br><button class="btn btn-warning btn-xs">Print Receipt</button></td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Table cell</td>
<td><button class="btn btn-warning btn-xs">Print Bill</button><br><button class="btn btn-warning btn-xs">Print Receipt</button></td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Table cell</td>
<td><button class="btn btn-warning btn-xs">Print Bill</button><br><button class="btn btn-warning btn-xs">Print Receipt</button></td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>
我尝试使用table-responsive作为类名。同时使用datatables和响应式函数...
$(document).ready(function() {
$('#example').DataTable( {
responsive: true,
} );
} );
它们中没有一个甚至添加滚动条来使用户更容易使用。我只是好奇其他人正在做什么,也许将行折叠在手机下面,还是怎样?对此的任何帮助将不胜感激!