Bootstrap表的自定义水平和垂直滚动条

Question

我使用的是一个引导表，它有一个大列表（水平滚动条可见）。我的客户要求在表格中有一个更细的滚动条。这里有一个bootstrap表的自定义滚动条的解决方案，问题是它适用于垂直滚动条，而不适用于水平滚动条。

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 dicamn"+ 
            "nominati te, reque causae prompta eos ex. Putent n"+
            "torquatos mei ei. Te verear offendit per. Vix eu erantn"+ 
            "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 dicamn"+ 
            "nominati te, reque causae prompta eos ex. Putent n"+
            "torquatos mei ei. Te verear offendit per. Vix eu erantn"+ 
            "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 dicamn"+ 
            "nominati te, reque causae prompta eos ex. Putent n"+
            "torquatos mei ei. Te verear offendit per. Vix eu erantn"+ 
            "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({});

Answer 1

由于slimScroll不支持水平滚动条，您可以使用另一个jQuery插件（我在代码段中使用了lionsbars）。但是你需要做一些调整来达到移动固定标题的目的。使用您想要的插件，但当您在表体上滚动时会更新标题scrollLeft属性，看看我的例子：

在Firefox MacOS上，滚动条无法像WebKit中那样进行自定义。也许你需要检测系统功能，并只在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>