Попробую. По другому спросить.
Сделал следующее:
<div class="scroll-table col-md-offset-2 col-md-2">
<button class="ComparisonHeader__arrowLeft btn btn-danger" id="left-button"> <- </button>
<button class="ComparisonHeader__arrowRight btn btn-danger" id="right-button"> -> </button>
</div>
На кнопки повесил:
$("#right-button").click(function() {
event.preventDefault();
$(".table-responsive").animate(
{
scrollLeft: "+=400px"
},
/*"slow"*/
);
});
$("#left-button").click(function() {
event.preventDefault();
$(".table-responsive").animate(
{
scrollLeft: "-=400px"
},
/*"slow"*/
);
});
Таблицу обернул в:
<div class="center table-responsive" style="overflow-x: auto;">
<table class="table" id="ex4">
...
</table>
</div>
В таком виде прокрутка работает как карусель, но это не совсем то.
Возможно ли сделать так - по умолчанию показывается 4 столбца таблицы,
если столбцов больше чем 4 то по клике на кнопку <button id="right-button"> -> </button>
1-ый столбец таблицы делается невидимым, а 5-ый столбец добавляется (снова 4-столбца).
А по клику на <button id="left-button"> <- </button> 5-ый столбец становится невидимым а 1-ый добавляется (снова видим 4 столбца).
Может кто то реализовывал?