Пользовательская горизонтальная и вертикальная полоса прокрутки для таблицы Bootstrap

Question

Я использую загрузочную таблицу и имею таблицу с большими столбцами (горизонтальная полоса прокрутки видна). У клиента есть требование - более тонкая полоса прокрутки в таблице. Вот тема, которая имеет дело с пользовательской полосой прокрутки для таблицы начальной загрузки. Проблема в том, что она работает для вертикальной полосы прокрутки, а не для горизонтальной полосы прокрутки.

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