关于响应式数据表的问题

Posted

技术标签:

【中文标题】关于响应式数据表的问题【英文标题】：Issue regarding responsive datatable 【发布时间】：2017-05-14 11:41:08 【问题描述】：

我在 rails webapp 上有一个现有的 ruby​​，我使用 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="&gt;" /></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="&gt;" /></td>
  </tr>
 </tbody>
</table>

我的实际看法是：

我的手机视图是：-

看，在移动视图中，出现了一个水平滚动条。我不需要这个滚动条，我想看到所有表格列都适合小屏幕，可能是小字体。

【问题讨论】：

请添加 html 版本...这里不是 ruby​​ 编码器。 如果可以的话可以分享一下问题的截图吗？还要检查与 dataTable 响应 css 文件（responsive.bootstrap.css）和引导支持的“dataTables.bootstrap.css”相关的文件到您的文件目录中。 【参考方案1】：

这是您更新的响应式数据表演示。请检查一次。

需要添加响应式JS

响应式 JS

$('#myTable').DataTable( 
  responsive: true
 );

同时检查 CSS/JS 文件及其结构。

1. JSFiddle Demo:

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="&gt;" /></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="&gt;" /></td>
  </tr>
 </tbody>
</table>

【讨论】：

@Abhradip:: 你检查过这个更新的演示了吗？如果它解决了您的问题，请接受我的回答。 :) 是的，这正是我所需要的。但我正在尝试将此解决方案与我现有的应用程序合并，但我遇到了一些问题。无论如何，你的解决方案帮助了我。谢谢！！ @Abhradip：很高兴听到这个消息！祝你好运！ :) 还交叉检查外部文件顺序（CSS/JS）并添加自定义 JS。 是的，我坚持。 我无法将它与我现有的应用程序合并。您能否告诉我仅需要哪些特定脚本和样式标记（外部 javascript 和 css）资源才能实现此功能。无需考虑 bootstrap 和 jquery 资源。这些我都已经有了。【参考方案2】：

我正在考虑使用宽度相对单位。

尝试使用 font-size: 1.3vw 之类的东西，然后根据需要进行调整。

body 
  width: 100%;

table 
  max-width: 100vw;
  font-size: 1.3vw;

<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="&gt;" />
      </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="&gt;" />
      </td>
    </tr>
  </tbody>
</table>

尝试在JSfiddle调整结果的大小

更新要删除水平条，请使用overflow-x: hidden;

【讨论】：

你错了。字体没有问题。我只需要省略水平滚动条，同时将整个表格与所有列一起显示。 @克里斯【参考方案3】：

试试这个 css，它不会在 590px 屏幕尺寸以上显示滚动。

@media (max-width: 767px) 
  .table thead > tr > th,
  .table tbody > tr > th,
  .table tfoot > tr > th,
  .table thead > tr > td,
  .table tbody > tr > td,
  .table tfoot > tr > td 
      padding: 1px;
      font-size: 6px;
    


@media (min-width: 768px) 

    .table thead > tr > th,
    .table tbody > tr > th,
    .table tfoot > tr > th,
    .table thead > tr > td,
    .table tbody > tr > td,
    .table tfoot > tr > td 
        padding: 2px;
        font-size: 8px;
    


@media (min-width: 992px) 
    .table thead > tr > th,
    .table tbody > tr > th,
    .table tfoot > tr > th,
    .table thead > tr > td,
    .table tbody > tr > td,
    .table tfoot > tr > td 
        padding: 3px;
        font-size: 12px;

【讨论】：

不。在小屏幕上，滚动条仍然存在，只是字体变小了。这不是要求。 此外，在您的示例中，所有列都不可见。即使在小型设备上，我也需要查看所有表格列。这是主要要求。

以上是关于关于响应式数据表的问题的主要内容，如果未能解决你的问题，请参考以下文章

使用引导程序进行分页的响应式数据表或表

关于数组的响应式方法和非响应式方法

响应式数据表html

关于Vue响应式原理

响应式开发学习——图片优化

关于vue的响应式原理