Показать сообщение отдельно
  #2 (permalink)  
Старый 31.05.2021, 20:00
Аспирант
Отправить личное сообщение для Dolf Посмотреть профиль Найти все сообщения от Dolf
 
Регистрация: 04.04.2021
Сообщений: 31

Попробую. По другому спросить.
Сделал следующее:

<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 столбца).
Может кто то реализовывал?
Ответить с цитированием