html - 将垂直滚轮添加到 HTML 表格
问题描述
我有一个基本表格,想在标题下显示前 3 行,然后提供一个滚轮来显示剩余的 2 行。
我试过设置桌子的高度并overflow: scroll
在不同的地方使用,但无法开始工作。我不确定这个属性是否可以在表格上使用,或者它是否只是用于 div。
我的代码在下面,非常感谢您的帮助。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 15px 100px;
}
</style>
<table>
<thead>
<tr>
<th>Name</th>
<th>DOB</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>26.01.1989</td>
<td>john@email.com</td>
</tr>
<tr>
<td>Rick Thompson</td>
<td>15.04.1995</td>
<td>rick@email.com</td>
</tr>
<tr>
<td>Tim Bloggs</td>
<td>03.02.2000</td>
<td>tim@email.com</td>
</tr>
<tr>
<td>Bob Roberton</td>
<td>11.04.1985</td>
<td>bob@email.com</td>
</tr>
<tr>
<td>Joe Bishop</td>
<td>03.02.2010</td>
<td>joe@email.com</td>
</tr>
</tbody>
</table>
</body>
解决方案
您必须将表格放在 div 中,然后将 div 的高度设置为小于表格的高度和overflow-y: scroll
.
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 15px 100px;
}
.table-wrap {
height: 222px;
overflow-y: scroll;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Name</th>
<th>DOB</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>26.01.1989</td>
<td>john@email.com</td>
</tr>
<tr>
<td>Rick Thompson</td>
<td>15.04.1995</td>
<td>rick@email.com</td>
</tr>
<tr>
<td>Tim Bloggs</td>
<td>03.02.2000</td>
<td>tim@email.com</td>
</tr>
<tr>
<td>Bob Roberton</td>
<td>11.04.1985</td>
<td>bob@email.com</td>
</tr>
<tr>
<td>Joe Bishop</td>
<td>03.02.2010</td>
<td>joe@email.com</td>
</tr>
</tbody>
</table>
</div>
</body>
推荐阅读
- elm - Elm 语言中的“Program 是由三个类型变量参数化的类型:flags、model 和 msg”是什么意思?
- php - php preg_replace 正则表达式替换子匹配中的匹配字符
- python - 创建列表时,“Amounts_list”看起来好像没有将值添加到列表中。我得到一个 None 值
- rest - 测试远程 REST 服务 API,特别是 HubSpot
- google-compute-engine - 在 Windows 服务器上配置 Stackdriver 代理以收集 Qlik 日志
- vue.js - Quasar Framework v1 中的 Setp Apollo graphql
- javascript - 想要从数组中拼接一个元素
- reactjs - 使用 scss 为 react-bootstrap 自定义样式
- azure - 如何从 Azure B2C 自定义策略的登录页面中删除“忘记密码”链接?
- python - 如何为 tfmot.sparsity.keras.prune_low_magnitude 设置可修剪层?