Question: Issue regarding responsive datatable

Question

Issue regarding responsive datatable

Answers 3
Added at 2016-12-30 07:12
Tags
Question

I have an existing ruby on rails webapp and I have used Bootstrap 3 to make it fully responsive and for other styling requirements. Now some of my webpages contain data tables. Since my webapp is fully responsive, so when I open my webapp in mobile devices, the data tables get fit into the small screen and a horizontal scrollbar comes at bottom. But I don't need this feature. I need that the whole table will be visible with smaller fonts and without horizontal scrollbar.

Is there any way to achieve this using media queries and any other tricks?

Please help me to figure out this.

Thanks in advance!!!

My data table is as follows:

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

My actual view is:

enter image description here

My mobile view is:-

enter image description here

See, in the mobile view, a horizontal scrollbar is appearing. I do not need this scrollbar and I want to see the all table columns to be fitted in the small screen, may be with small fonts.

Answers to

Issue regarding responsive datatable

nr: #1 dodano: 2016-12-30 07:12

I'm thinking of using width relative units.

Trying using someting like font-size: 1.3vw, and adjust it to your need.

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>

Trying resizing the result at the JSfiddle

Update To remove horizontal bars, use overflow-x: hidden;

nr: #2 dodano: 2016-12-30 08:12

Try this css it will not shown scroll above 590px screen size.

@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;
    }
}
nr: #3 dodano: 2016-12-30 08:12

Here is a your updated responsive dataTable demo..please check it once.

You need to add Responsive JS

Responsive JS

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

Also check the CSS/JS files and their structure.

enter image description here

JSFiddle Demo:

Responsive dataTable Demo:

$('#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>

Source Show
◀ Wstecz