Custom horizontal and vertical scrollbar for Bootstrap table

Question

I'm using a bootstrap-table and have a table with large columns (horizontal scrollbar is visible). My client has the requirement of a slimmer scrollbar in the table. Here is a solution for a custom scrollbar for a bootstrap table, the problem is that it works for a vertical scrollbar, not for a horizontal one.

jsfiddle

html

 <table class="table table-striped table-bordered table-hover" cellspacing="0" id="mainTable" data-show-toggle="true" data-show-columns="true" data-pagination="true" data-show-filter="true" data-filter-control="true" >
   <thead>
      <tr>
         <th data-field="CustomerName">CustomerN</th>
         <th data-field="ProjectName">ProjectN</th>
         <th data-field="ProjectType">ProjectT</th>
         <th data-field="ProjectDetails">ProjectD</th>
         <th data-field="ProjectLocation">ProjectL</th>
         <th data-field="ProjectTiming">ProjectT</th>
         <th data-field="ProjectTeam">ProjectT</th>
         <th data-field="ProjectStatus">ProjectS</th>
         <th data-field="ProjectProgress">ProjectP</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>GE Capital Corporation</td>
         <td>Services SOW #1</td>
         <td>Project | T&amp;M</td>
         <td>"Inani fabulas nominavi sea no.\n"+ 
            "Ad quodsi luptatum expetenda eum, sed ludus dicam\n"+ 
            "nominati te, reque causae prompta eos ex. Putent \n"+
            "torquatos mei ei. Te verear offendit per. Vix eu erant\n"+ 
            "doctus delenit, et copiosae indoctum accommodare eum.\n"+ 
            "Errem tritani in qui, te vis legere saperet corpora.\n"+ 
            "Eu mei nobis pertinacia, in has putent virtute voluptua,\n"+ 
            "ne probo dicta utinam nam."
         </td>
         <td>Norwalk, CT</td>
         <td>Feb-Aug 2015</td>
         <td>John, Adam, Pete</td>
         <td>Running</td>
         <td>Empty</td>
      </tr>
      <tr>
         <td>GE Capital Corporation</td>
         <td>Services SOW #1</td>
         <td>Project | T&amp;M</td>
         <td>"Inani fabulas nominavi sea no.\n"+ 
            "Ad quodsi luptatum expetenda eum, sed ludus dicam\n"+ 
            "nominati te, reque causae prompta eos ex. Putent \n"+
            "torquatos mei ei. Te verear offendit per. Vix eu erant\n"+ 
            "doctus delenit, et copiosae indoctum accommodare eum.\n"+ 
            "Errem tritani in qui, te vis legere saperet corpora.\n"+ 
            "Eu mei nobis pertinacia, in has putent virtute voluptua,\n"+ 
            "ne probo dicta utinam nam."
         </td>
         <td>Norwalk, CT</td>
         <td>Feb-Aug 2015</td>
         <td>John, Adam, Pete</td>
         <td>Running</td>
         <td>Empty</td>
      </tr>
      <tr>
         <td>GE Capital Corporation</td>
         <td>Services SOW #1</td>
         <td>Project | T&amp;M</td>
         <td>"Inani fabulas nominavi sea no.\n"+ 
            "Ad quodsi luptatum expetenda eum, sed ludus dicam\n"+ 
            "nominati te, reque causae prompta eos ex. Putent \n"+
            "torquatos mei ei. Te verear offendit per. Vix eu erant\n"+ 
            "doctus delenit, et copiosae indoctum accommodare eum.\n"+ 
            "Errem tritani in qui, te vis legere saperet corpora.\n"+ 
            "Eu mei nobis pertinacia, in has putent virtute voluptua,\n"+ 
            "ne probo dicta utinam nam."
         </td>
         <td>Norwalk, CT</td>
         <td>Feb-Aug 2015</td>
         <td>John, Adam, Pete</td>
         <td>Running</td>
         <td>Empty</td>
      </tr>
   </tbody>
</table>

javascript

$('#mainTable').bootstrapTable({
});

$('.fixed-table-body').slimScroll({});

It doesn't look like slimScroll supports horizontal scrolling. What browsers do you need to target for this project? — chris van hooser, Dec 20 '15 at 22:24
I didn't notice slimScroll doesn't support horizontal scrollbar, thanks. I need to handle all browsers on Windows (scrollbars in table are too thick). — Matt, Dec 20 '15 at 23:25
You can ry the following plugin [**malihu-custom-scrollbar-plugin**](http://manos.malihu.gr/jquery-custom-content-scroller/). Here is a [**fiddle**](https://jsfiddle.net/DavidDomain/zk4dxcsf/) — DavidDomain, Dec 21 '15 at 00:27
@DavidDomain thanks for response. In your example body of table is horizontal scrollable, but the header of table is fixed. — Matt, Dec 21 '15 at 08:00
Try [perfect scrollbar](https://noraesae.github.io/perfect-scrollbar/). quite an amazing plugin. — Daniel, Dec 23 '15 at 21:43
ref link to OP in github issues: https://github.com/wenzhixin/bootstrap-table/issues/1818 — Daniel Brose, Jan 04 '16 at 04:28

ElChiniNet · Accepted Answer · 2019-09-19T21:44:18.287

As slimScroll doesn't support horizontal scrollbars, you could use another jQuery plugin (I've used lionsbars for the snippet). But you need to do some tweaks to achieve the purpose of moving the fixed header. Use the plugin that you want but update the header scrollLeft property when you scroll on the table body, look at my example:

On Firefox MacOS the scrollbars can't be customized like in WebKit. Maybe you need to detect system capabilities and apply the plugin only on Windows.

$(function () {
  var $table = $('#table');
  buildTable($table, 50, 50);
});

function buildTable($el, cells, rows) {
  var i, j, row,
      columns = [],
      data = [],
      $header;

  for (i = 0; i < cells; i++) {
    columns.push({
      field: 'field' + i,
      title: 'Cell' + i,
      sortable: true
    });
  }
  for (i = 0; i < rows; i++) {
    row = {};
    for (j = 0; j < cells; j++) {
      row['field' + j] = 'Row-' + i + '-' + j;
    }
    data.push(row);
  }
  $el.bootstrapTable('destroy').bootstrapTable({
    columns: columns,
    data: data
  });

  $('.fixed-table-body').lionbars().find(".lb-wrap").on("scroll", function(evt){
    if (!$header) { $header = $('.fixed-table-header'); }
    $header.scrollLeft( this.scrollLeft );
  });
}

::-webkit-scrollbar {
   -webkit-appearance: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/bootstrap-table.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Charuru/lionbars@master/js/jquery.lionbars.0.3.js"></script>

<link href="https://cdn.jsdelivr.net/gh/Charuru/lionbars@master/css/lionbars.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/bootstrap-table.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>

<div class="container">
  <table id="table" data-height="400" data-show-columns="true"></table>
</div>

Thank you, detect OS is easy in javascript. http://stackoverflow.com/questions/9514179/how-to-find-the-operating-system-version-using-javascript — Matt, Dec 24 '15 at 13:36
You're welcome. Yes, you need something like that to avoid the custom scrollbar on MacOS. — ElChiniNet, Dec 24 '15 at 13:57

Custom horizontal and vertical scrollbar for Bootstrap table

1 Answers1