Пользовательская горизонтальная и вертикальная полоса прокрутки для таблицы 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