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

Question

我正在使用bootstrap-table 并有一个带有large 列的表格（水平滚动条可见）。我的客户需要在表格中使用更纤细的滚动条。 Here 是 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 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({});

Answer 1

由于slimScroll 不支持水平滚动条，您可以使用另一个jQuery 插件（我使用lionsbars 作为sn-p）。但是你需要做一些调整来达到移动固定头的目的。使用您想要的插件，但在滚动表格主体时更新标题 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>