Как включить прокрутку таблицы HTML в одном столбце?

Я начинаю разрабатывать приложение HTML/Javascript/jquery.

У меня есть таблица HTML со 100 строками и 5 столбцами.

Я могу отображать только 10 строк этой таблицы на моем устройстве, поэтому мне нужно прокручивать вверх и вниз по этой таблице, чтобы отображать все значения.

Для этого мне нужно включить прокрутку только в среднем столбце. С помощью события прокрутки в среднем столбце таблица должна прокручиваться в обычном режиме.

С помощью события прокрутки в другом столбце таблица не должна прокручиваться.

Кроме того, таблица имеет заголовок и нижний колонтитул. Эти элементы должны быть зафиксированы на прокрутке таблицы.

Можете ли вы опубликовать какую-то идею или часть кода для этого?

-2
источник поделиться
1 ответ

Просто переключите значения overflow-y auto/hidden когда наводится нужный столбец

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

$container.find("td").hover(function(){
  $container.toggleClass("oyScroll", $(this).index() == 1);
});
#container {
  height:170px;
  overflow:hidden;
}
#container.oyScroll {
  overflow-y: auto;
}
table {
  width:100%;
}
table td {
  background:#eee;
  padding: 12px 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </table>
</div>
+1
источник

Посмотрите другие вопросы по меткам или Задайте вопрос