Bootstrap表

Question

我使用bootstrap-table并拥有一个包含large列的表格（水平滚动条可见）。客户有要求 - 表中的滚动条较小。 Here是主题，它处理自举表的自定义滚动条。问题是它适用于垂直滚动条而不适用于水平滚动条。

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

您可以使用其他jQuery插件（我已将lionsbars用于JSFiddle示例）。但是你需要做一些调整才能达到移动固定头的目的。使用你想要的插件，但滚动表体时更新标题scrollLeft属性，看看我的例子：

  

在Firefox MacOS上，无法像在WebKit中那样自定义滚动条。也许您需要检测系统功能并仅在Windows上应用该插件。

var $table = $("#table");

$(function () {
  buildTable($table, 50, 50);
});

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

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

    $(".fixed-table-header").scrollLeft( $(this).scrollLeft() );

  });
}

jsfiddle