迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > HTML >

使 HTML 表格可滚动

作者:迹忆客 最近更新:2023/03/22 浏览次数:

本文将介绍一种制作可垂直滚动的 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;
}
id Name Country
1 John Doe Nepal
2 Sam Smith India
3 Jack Daniels China

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

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

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

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

HTML 中的 role 属性

发布时间:2023/05/06 浏览次数:124 分类:HTML

本篇文章介绍 HTML role属性。HTML中 role 属性介绍,role 属性定义描述语义的 HTML 元素的角色。

在 HTML 中打印时分页

发布时间:2023/05/06 浏览次数:188 分类:HTML

本篇文章介绍如何在打印 HTML 页面或内容时强制分页。将 page-break-after 属性设置为 always Inside @media print to Page Break in HTML

在 HTML 中显示基于 Cookie 的图像

发布时间:2023/05/06 浏览次数:154 分类:HTML

本文介绍如何根据 HTML 中的 cookies 显示图像。根据 HTML 中设置的 Cookies 显示图像。问题陈述是我们需要根据网页传递的cookie来显示特定的图像。

在 HTML 中创建下载链接

发布时间:2023/05/06 浏览次数:140 分类:HTML

本文介绍如何在 HTML 中创建下载链接。使用 download 属性在 HTML 中创建下载链接.。我们可以使用 HTML 锚元素内的下载属性来创建下载链接。

HTML 中的 ::before 选择器

发布时间:2023/05/06 浏览次数:70 分类:HTML

本教程介绍 CSS ::before 伪元素。CSS ::before 伪元素。 ::before 选择器是一个 CSS 伪元素,我们可以使用它在一个或多个选定元素之前插入内容。 它默认是内联的。

在 HTML 中创建一个可滚动的 Div

发布时间:2023/05/06 浏览次数:54 分类:HTML

本篇文章介绍如何使 HTML div 可滚动。本文将介绍在 HTML 中使 div 可滚动的方法。 我们将探索垂直和水平滚动,并通过示例查看它们的实现。

HTML 显示箭头的代码

发布时间:2023/05/06 浏览次数:153 分类:HTML

一篇关于用于显示箭头的 Unicode 字符实体的紧凑文章。本文讨论使用 Unicode 字符实体在我们的 HTML 页面上显示不同的字符。 HTML 中使用了许多实体,但我们将重点学习表示上、下、左、右的三角

在 HTML 中启用和禁用复选框

发布时间:2023/05/06 浏览次数:149 分类:HTML

本篇文章介绍如何启用和禁用 HTML 中的复选框。HTML 中的复选框 复选框是一个交互式框,可以切换以表示肯定或否定。 它广泛用于表单和对话框。

HTML 中的只读复选框

发布时间:2023/05/06 浏览次数:198 分类:HTML

本篇文章介绍了如何在 HTML 中制作只读复选框。本文是关于如何使 HTML 复选框控件成为只读组件的快速破解。 但是,首先,让我们简要介绍一下复选框控件。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便