Issue regarding responsive datatable

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:

My mobile view is:-

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.

If possible can share the screenshot of the issue?. Also check the files related to dataTable responsive css file(responsive.bootstrap.css) and bootstrap supported "dataTables.bootstrap.css" into the your files directory. — Sayed Rafeeq, Dec 30 '16 at 06:45

Sayed Rafeeq · Accepted Answer · 2017-01-09T13:30:21.800

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.

1. JSFiddle Demo:

2. Working Demo: Responsive dataTable

$('#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:: Did you check this updated demo? if it solves your problem please do accept my answer. :) — Sayed Rafeeq, Dec 30 '16 at 10:19
Yes,,It is that what I needed. But I am trying to merge this solution with my existing app and I am facing some issues. Anyways,your solution helped me. Thanks!! — Abhradip, Dec 30 '16 at 11:13
@Abhradip: Glad to hear that! Good luck! :) also cross check external files order (CSS/JS) and add custom JS. — Sayed Rafeeq, Dec 30 '16 at 11:30
I am unable to merge this with my existing app. Can you kindly tell me the only which particular script and style tag (external javascript and css) resources will be required to achieve only this feature. No need to think about bootstrap and jquery resources. I have all these already. — Abhradip, Dec 31 '16 at 06:02
I have placed the small two liner code at the end of my view file where I have my datatable and all other resources are there in the asset folder (since I am in Ruby on rails). Now when I am going to reload the page it prompts an error showing "can not reinitialize datatable with id="XXX . For more information visit the page XXX.." — Abhradip, Dec 31 '16 at 07:01
That following error accord due to initializing dataTables twice or thrice. Please cross check once your "Custom JS" for more information check these links: https://datatables.net/manual/tech-notes/3 and http://stackoverflow.com/questions/13708781/datatables-warningtable-id-example-cannot-reinitialise-data-table — Sayed Rafeeq, Dec 31 '16 at 07:12
I am using bootstrap 3. So all the responsive .js and .css files needed to be included? — Abhradip, Jan 03 '17 at 10:56

score 1 · Answer 2 · edited Jun 20 '20 at 09: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;

You got it wrong. There is no issue with fonts. I just need to omit the horizontal scrollbar and at the same time the whole table to be displayed as it is with all of its columns. @Chris — Abhradip, Dec 30 '16 at 07:01

Ahmar · Answer 3 · 2016-12-30T07:06:06.353

0

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

edited Dec 30 '16 at 07:06

answered Dec 30 '16 at 07:01

Ahmar

3,717
2
24
42

Nopes. On small screen, the scrollbar is still there and only the font becomes smaller. That is not the requirement. – Abhradip Dec 30 '16 at 07:04
moreover in your example the all columns are not visible. I need to see all table columns even on small devices. Thats the main requirement. – Abhradip Dec 30 '16 at 07:29

Issue regarding responsive datatable

3 Answers3