如何在单个列上启用HTML表格滚动？

Question

我开始开发HTML / Javascript / jquery应用程序。

我有一个包含100行和5列的HTML表格。

我的设备上只能显示10行此表，因此我需要在此表上向上和向下滚动以显示所有值。

为了做到这一点，我需要只在中间列上启用滚动。使用中间列上的滚动事件，表格应该正常滚动。

如果滚动事件在其他列上，则表格不应滚动。

此外，该表有一个页眉和一个页脚。必须在表滚动中修复这些元素。

你能发布一些想法或一段代码吗？

Answer 1

当所需的列悬停时，只需切换overflow-y值auto / hidden

＆＃13;

＆＃13;

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

$container.find("td").hover(function(){
  $container.toggleClass("oyScroll", $(this).index() == 1);
});

＆＃13;

#container {
  height:170px;
  overflow:hidden;
}
#container.oyScroll {
  overflow-y: auto;
}
table {
  width:100%;
}
table td {
  background:#eee;
  padding: 12px 24px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;