我有一个现有的 ruby on rails webapp,我使用 Bootstrap 3 使其完全响应并满足其他样式要求。现在我的一些网页包含数据表。因为我的 web 应用程序是完全响应的,所以当我在移动设备上打开我的 web 应用程序时,数据表会适应小屏幕,并且水平滚动条出现在底部。 但我不需要这个功能。我需要整个表格以较小的字体显示并且没有水平滚动条。
有没有办法使用媒体查询和任何其他技巧来实现这一目标?
请帮我解决这个问题。
提前致谢!!!
我的数据表如下:
<table class="table table-striped table-hover" id="indentdatesort">
<thead>
<tr>
<th>Indent No.</th>
<th>Warehouse</th>
<th>Item</th>
<th>Make/Catno</th>
<th>UOM</th>
<th>Qty</th>
<th>Qty P</th>
<th>Sh Cl</th>
<th>Date</th>
<th>SortDate</th>
<th>Rqt Dt</th>
<th>Sort Rqt Dt</th>
<th>Cost Centre</th>
<th>Remarks</th>
<th>By</th>
<th>Entry</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>INDMSF/16-17/00002</td>
<td>Furnace</td>
<td>Cotton Hand Gloves</td>
<td></td>
<td>pair</td>
<td>12.0</td>
<td>0.0</td>
<td></td>
<td>25/06/16</td>
<td>06/25/16</td>
<td>25/06/16</td>
<td>06/25/16</td>
<td>Kiln . Kiln 1 . Girth Gear</td>
<td></td>
<td>Ashfaque</td>
<td>Ayush Jhunjhunwala</td>
<td><input class="btn btn-default btn-xs" name="154" type="submit" value=">" /></td>
</tr>
<tr>
<td>INDMSF/16-17/00003</td>
<td>Furnace</td>
<td>Bearing 22317 EW33J</td>
<td></td>
<td>no</td>
<td>2.0</td>
<td>2.0</td>
<td></td>
<td>31/08/16</td>
<td>08/31/16</td>
<td>31/08/16</td>
<td>08/31/16</td>
<td></td>
<td></td>
<td>Ashfaque</td>
<td>Ayush Jhunjhunwala</td>
<td><input class="btn btn-default btn-xs" name="155" type="submit" value=">" /></td>
</tr>
</tbody>
</table>
我的实际观点是:
我的手机 View 是:-
请看,在移动 View 中,出现了一个水平滚动条。我不需要这个滚动条,我想看到所有表格列都适合小屏幕,可能是小字体。
最佳答案
这是您更新后的响应式数据表演示..请检查一次。
你需要添加响应式JS
响应式 JS
$('#myTable').DataTable( {
responsive: true
} );
还要检查 CSS/JS 文件及其结构。
<强>2。工作演示:响应式数据表
$('#myTable').DataTable( {
responsive: true
} );
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" >
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
<table class="table table-striped table-hover" id="myTable">
<thead>
<tr>
<th>Indent No.</th>
<th>Warehouse</th>
<th>Item</th>
<th>Make/Catno</th>
<th>UOM</th>
<th>Qty</th>
<th>Qty P</th>
<th>Sh Cl</th>
<th>Date</th>
<th>SortDate</th>
<th>Rqt Dt</th>
<th>Sort Rqt Dt</th>
<th>Cost Centre</th>
<th>Remarks</th>
<th>By</th>
<th>Entry</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>INDMSF/16-17/00002</td>
<td>Furnace</td>
<td>Cotton Hand Gloves</td>
<td></td>
<td>pair</td>
<td>12.0</td>
<td>0.0</td>
<td></td>
<td>25/06/16</td>
<td>06/25/16</td>
<td>25/06/16</td>
<td>06/25/16</td>
<td>Kiln . Kiln 1 . Girth Gear</td>
<td></td>
<td>Ashfaque</td>
<td>Ayush Jhunjhunwala</td>
<td><input class="btn btn-default btn-xs" name="154" type="submit" value=">" /></td>
</tr>
<tr>
<td>INDMSF/16-17/00003</td>
<td>Furnace</td>
<td>Bearing 22317 EW33J</td>
<td></td>
<td>no</td>
<td>2.0</td>
<td>2.0</td>
<td></td>
<td>31/08/16</td>
<td>08/31/16</td>
<td>31/08/16</td>
<td>08/31/16</td>
<td></td>
<td></td>
<td>Ashfaque</td>
<td>Ayush Jhunjhunwala</td>
<td><input class="btn btn-default btn-xs" name="155" type="submit" value=">" /></td>
</tr>
</tbody>
</table>
关于html - 关于响应数据表的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41391698/