迹忆客 专注技术分享

本文将介绍一种制作可垂直滚动的 HTML 表格的方法。

将 CSS overflow-y 属性设置为 scroll 以使 HTML 表格可滚动

当 HTML 表格很长时，需要仅滚动表格而不是整个页面的功能。为了实现这个功能，我们可以使用 overflow-y 属性。

这里，y 代表 y 轴。该属性定义了块级元素沿垂直轴的溢出属性。

scroll 值使块级元素可以从上到下滚动。

为了使 HTML 表格可以垂直滚动，我们可以用 <div> 包裹表格。然后，我们可以使用 height 属性为 <div> 设置一个固定的高度。

之后，我们可以将 overflow-y 属性设置为 scroll。如果表格高度超过我们设置的 div 的高度，那么 overflow-y: scroll 将使表格在 y 方向（垂直）可滚动。

因此，我们需要确保表格的高度超过 <div> 的高度。

例如，创建一个 div 并给它一个类名 container。在那个 div 中，创建一个表并给它一个类名 data。

使用 tr、th 和 td 标记在表格中填充数据。

在 CSS 中，选择 container 类并将其 height 属性设置为 70px 并将其 overflow-y 属性设置为 scroll。确保表格内容的高度超过 70px。

接下来，使用类选择器和表的 th 和 td 元素选择表。然后，将其 border 属性设置为 1px solid black，将 border-collapse 属性设置为 collapse，将 padding 设置为 4px。 （注意：这不是强制性的，这是为了使表格更具可读性。）

下面的示例显示表格是垂直可滚动的，因为表格的高度大于 div 或 .container 的高度。

示例代码：

<div class="container">
<table class="data">
<tr>
 <th>id</th>
 <th>Name</th>
 <th>Country</th>
</tr>
<tr>
 <td>1</td>
 <td>John Doe</td>
 <td>Nepal</td>
</tr>
<tr>
 <td>2</td>
 <td>Sam Smith</td>
 <td>India</td>
</tr>
<tr>
 <td>3</td>
 <td>Jack Daniels</td>
 <td>China</td>
</tr>
</table>
</div>

.container {
 height: 70px;
 overflow-y: scroll;
}
.data, th, td {
 border: 1px solid black;
 border-collapse: collapse;
 padding: 4px;
}

结果，当我们加载页面时，整个表格是不可见的。这是因为我们将 70px 设置为容器的高度。

但是当我们垂直向下滚动时，我们可以看到表格的其余内容。

这样，我们可以使用 overflow-y 属性并将其设置为 scroll 使 HTML 表格垂直滚动。