使 HTML 表格可滚动

您所在的位置:网站首页 excel表格垂直滚动条设置 使 HTML 表格可滚动

使 HTML 表格可滚动

2024-05-17 16:31| 来源: 网络整理| 查看: 265

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

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

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

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

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

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

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

因此,我们需要确保表格的高度超过 的高度。

例如,创建一个 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 的高度。

示例代码:

id Name Country 1 John Doe Nepal 2 Sam Smith India 3 Jack Daniels China .container { height: 70px; overflow-y: scroll; } .data, th, td { border: 1px solid black; border-collapse: collapse; padding: 4px; }

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

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

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



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3