Question

我在rails webapp上有一个现有的ruby，我使用了Bootstrap 3来使其完全响应并满足其他样式要求。现在我的一些网页包含数据表。由于我的webapp完全响应，因此当我在移动设备中打开我的webapp时，数据表适合小屏幕，水平滚动条位于底部。但我不需要这个功能。我需要使用较小的字体和没有水平滚动条的整个表格。

有没有办法使用媒体查询和任何其他技巧来实现这一目标？

请帮我弄明白。

提前致谢!!!

我的数据表如下：

<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>

我的实际观点是：

我的移动视图是： -

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

Answer 1

这是您更新的响应式dataTable演示..请检查一次。

您需要添加自适应JS

响应JS

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

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

<强> 1. JSFiddle Demo:

<强> 2。工作演示：响应式数据表

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

尝试使用font-size: 1.3vw之类的内容，并根据需要进行调整。

＆＃13;

body {
  width: 100%;
}
table {
  max-width: 100vw;
  font-size: 1.3vw;
}

＆＃13;

<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>

＆＃13;

尝试在JSfiddle

调整结果大小

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

Answer 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;
    }
}

关于响应式数据表的问题

3 个答案: