html - 使用 CSS 冻结 HTML 表格的第一行
问题描述
我正在尝试冻结 html 表的标题列。
我在需要冻结标题的应用程序中使用了一个预定义的表格组件（我必须根据我的团队使用它）。
我知道如果我申请 position:sticky; 它会起作用 和顶部：0；对于具有 thead 标签的表格，但在我的情况下，表格标题仅使用 tbody 创建，如下面的代码片段所示。Grid 总是保持 100 多行，总是需要滚动。
您的建议将是最有帮助的。
table {
border-collapse: collapse;
width: 100%;
}
td {
text-align: left;
padding: 8px;
}<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h2>Colored Table Header</h2>
<table>
<tbody>
<tr>
<td >ID</td>
<td>Name</td>
<td>Description</td>
<td>Value</td>
<td>Units</td>
<td>Directions</td>
</tr>
</tbody>
<tbody>
<tr>
<td >1</td>
<td>name1</td>
<td>Description1</td>
<td>Value1</td>
<td>Unit1</td>
<td>Direction1</td>
</tr>
</tbody>
<tbody>
<tr>
<td >2</td>
<td>name2</td>
<td>Description2</td>
<td>Value2</td>
<td>Unit2</td>
<td>Direction1</td>
</tr>
</tbody>
<tbody>
<tr>
<td >3</td>
<td>name3</td>
<td>Description3</td>
<td>Value3</td>
<td>Unit3</td>
<td>Direction3</td>
</tr>
</tbody>
<tbody>
<tr>
<td >4</td>
<td>name4</td>
<td>Description4</td>
<td>Value4</td>
<td>Unit4</td>
<td>Direction4</td>
</tr>
</tbody><tbody>
<tr>
<td >1</td>
<td>name1</td>
<td>Description1</td>
<td>Value1</td>
<td>Unit1</td>
<td>Direction1</td>
</tr>
</tbody>
<tbody>
<tr>
<td >2</td>
<td>name2</td>
<td>Description2</td>
<td>Value2</td>
<td>Unit2</td>
<td>Direction1</td>
</tr>
</tbody>
<tbody>
<tr>
<td >3</td>
<td>name3</td>
<td>Description3</td>
<td>Value3</td>
<td>Unit3</td>
<td>Direction3</td>
</tr>
</tbody>
<tbody>
<tr>
<td >4</td>
<td>name4</td>
<td>Description4</td>
<td>Value4</td>
<td>Unit4</td>
<td>Direction4</td>
</tr>
</tbody><tbody>
<tr>
<td >1</td>
<td>name1</td>
<td>Description1</td>
<td>Value1</td>
<td>Unit1</td>
<td>Direction1</td>
</tr>
</tbody>
<tbody>
<tr>
<td >2</td>
<td>name2</td>
<td>Description2</td>
<td>Value2</td>
<td>Unit2</td>
<td>Direction1</td>
</tr>
</tbody>
<tbody>
<tr>
<td >3</td>
<td>name3</td>
<td>Description3</td>
<td>Value3</td>
<td>Unit3</td>
<td>Direction3</td>
</tr>
</tbody>
<tbody>
<tr>
<td >4</td>
<td>name4</td>
<td>Description4</td>
<td>Value4</td>
<td>Unit4</td>
<td>Direction4</td>
</tr>
</tbody>
<tbody>
<tr>
<td >1</td>
<td>name1</td>
<td>Description1</td>
<td>Value1</td>
<td>Unit1</td>
<td>Direction1</td>
</tr>
</tbody>
<tbody>
<tr>
<td >2</td>
<td>name2</td>
<td>Description2</td>
<td>Value2</td>
<td>Unit2</td>
<td>Direction1</td>
</tr>
</tbody>
<tbody>
<tr>
<td >3</td>
<td>name3</td>
<td>Description3</td>
<td>Value3</td>
<td>Unit3</td>
<td>Direction3</td>
</tr>
</tbody>
<tbody>
<tr>
<td >4</td>
<td>name4</td>
<td>Description4</td>
<td>Value4</td>
<td>Unit4</td>
<td>Direction4</td>
</tr>
</tbody>
<tbody>
<tr>
<td >1</td>
<td>name1</td>
<td>Description1</td>
<td>Value1</td>
<td>Unit1</td>
<td>Direction1</td>
</tr>
</tbody>
<tbody>
<tr>
<td >2</td>
<td>name2</td>
<td>Description2</td>
<td>Value2</td>
<td>Unit2</td>
<td>Direction1</td>
</tr>
</tbody>
<tbody>
<tr>
<td >3</td>
<td>name3</td>
<td>Description3</td>
<td>Value3</td>
<td>Unit3</td>
<td>Direction3</td>
</tr>
</tbody>
<tbody>
<tr>
<td >4</td>
<td>name4</td>
<td>Description4</td>
<td>Value4</td>
<td>Unit4</td>
<td>Direction4</td>
</tr>
</tbody>
</table>
</body>
</html>谢谢。
解决方案
添加选择position:sticky器tbody:first-child tr td。
tbody:first-child tr td{
background-color:lightgray;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
text-align: left;
padding: 8px;
}
tbody:first-child tr td{
background-color:lightgray;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h2>Colored Table Header</h2>
<table>
<tbody>
<tr>
<td >ID</td>
<td>Name</td>
<td>Description</td>
<td>Value</td>
<td>Units</td>
<td>Directions</td>
</tr>
</tbody>
<tbody>
<tr>
<td >1</td>
<td>name1</td>
<td>Description1</td>
<td>Value1</td>
<td>Unit1</td>
<td>Direction1</td>
</tr>
</tbody>
<tbody>
<tr>
<td >2</td>
<td>name2</td>
<td>Description2</td>
<td>Value2</td>
<td>Unit2</td>
<td>Direction1</td>
</tr>
</tbody>
<tbody>
<tr>
<td >3</td>
<td>name3</td>
<td>Description3</td>
<td>Value3</td>
<td>Unit3</td>
<td>Direction3</td>
</tr>
</tbody>
<tbody>
<tr>
<td >4</td>
<td>name4</td>
<td>Description4</td>
<td>Value4</td>
<td>Unit4</td>
<td>Direction4</td>
</tr>
</tbody><tbody>
<tr>
<td >1</td>
<td>name1</td>
<td>Description1</td>
<td>Value1</td>
<td>Unit1</td>
<td>Direction1</td>
</tr>
</tbody>
<tbody>
<tr>
<td >2</td>
<td>name2</td>
<td>Description2</td>
<td>Value2</td>
<td>Unit2</td>
<td>Direction1</td>
</tr>
</tbody>
<tbody>
<tr>
<td >3</td>
<td>name3</td>
<td>Description3</td>
<td>Value3</td>
<td>Unit3</td>
<td>Direction3</td>
</tr>
</tbody>
<tbody>
<tr>
<td >4</td>
<td>name4</td>
<td>Description4</td>
<td>Value4</td>
<td>Unit4</td>
<td>Direction4</td>
</tr>
</tbody><tbody>
<tr>
<td >1</td>
<td>name1</td>
<td>Description1</td>
<td>Value1</td>
<td>Unit1</td>
<td>Direction1</td>
</tr>
</tbody>
<tbody>
<tr>
<td >2</td>
<td>name2</td>
<td>Description2</td>
<td>Value2</td>
<td>Unit2</td>
<td>Direction1</td>
</tr>
</tbody>
<tbody>
<tr>
<td >3</td>
<td>name3</td>
<td>Description3</td>
<td>Value3</td>
<td>Unit3</td>
<td>Direction3</td>
</tr>
</tbody>
<tbody>
<tr>
<td >4</td>
<td>name4</td>
<td>Description4</td>
<td>Value4</td>
<td>Unit4</td>
<td>Direction4</td>
</tr>
</tbody>
<tbody>
<tr>
<td >1</td>
<td>name1</td>
<td>Description1</td>
<td>Value1</td>
<td>Unit1</td>
<td>Direction1</td>
</tr>
</tbody>
<tbody>
<tr>
<td >2</td>
<td>name2</td>
<td>Description2</td>
<td>Value2</td>
<td>Unit2</td>
<td>Direction1</td>
</tr>
</tbody>
<tbody>
<tr>
<td >3</td>
<td>name3</td>
<td>Description3</td>
<td>Value3</td>
<td>Unit3</td>
<td>Direction3</td>
</tr>
</tbody>
<tbody>
<tr>
<td >4</td>
<td>name4</td>
<td>Description4</td>
<td>Value4</td>
<td>Unit4</td>
<td>Direction4</td>
</tr>
</tbody>
<tbody>
<tr>
<td >1</td>
<td>name1</td>
<td>Description1</td>
<td>Value1</td>
<td>Unit1</td>
<td>Direction1</td>
</tr>
</tbody>
<tbody>
<tr>
<td >2</td>
<td>name2</td>
<td>Description2</td>
<td>Value2</td>
<td>Unit2</td>
<td>Direction1</td>
</tr>
</tbody>
<tbody>
<tr>
<td >3</td>
<td>name3</td>
<td>Description3</td>
<td>Value3</td>
<td>Unit3</td>
<td>Direction3</td>
</tr>
</tbody>
<tbody>
<tr>
<td >4</td>
<td>name4</td>
<td>Description4</td>
<td>Value4</td>
<td>Unit4</td>
<td>Direction4</td>
</tr>
</tbody>
</table>
</body>
</html>推荐阅读
- r - 列表中的重复元素具有与第二个列表中的元素数量相同的长度
- angularjs - 带有单选的Angularjs列表框控件
- odoo - 如何在 odoo-10 树视图中应用过滤器？
- python - 设置从 1 到 n 的范围
- java - Android：如何优化从 firebase 获取数据？
- python-3.x - Python请求发送两次
- android - 如何解决混合支持库版本
- jquery - jquery动画搜索栏运动
- javascript - 重新排序对象数组中的元素
- angular - 在Angular2中，如何使用resolve和promise在应用程序路由渲染页面之前等待从服务器加载数据