使 HTML 表格可滚动

Rajeev Baniya 2023年2月19日
使 HTML 表格可滚动

本文将介绍一种制作可垂直滚动的 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

使用 trthtd 标记在表格中填充数据。

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

接下来,使用类选择器和表的 thtd 元素选择表。然后,将其 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 表格垂直滚动。

相关文章 - HTML Table