javascript - 如何在 javascript/html/jquery 中修复我的表的标题
问题描述
我制作了一个 html javascript 页面。我面临的问题是:
我的页面上有 2 个滚动条,在滚动与我的表格相对应的内部滚动条时,我希望我的表格标题应该保持固定,并且行应该向下移动,因为它们现在正在向下移动。
我希望该表头应保持固定,以便用户随时可以看到任何行的列名标题。
在滚动外部滚动条时,没有这样的要求。
有什么办法吗?
这是我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.content {
padding: 15px 40px;
overflow: auto;
height: 565px;
}
#abc {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#abc td, #abc th {
border: 2px solid #ddd;
padding:8px;
}
#abc td {
padding-left:20px;
font-size:14px;
}
#abc tr:nth-child(even){background-color: #f2f2f2;}
#abc tr:hover {background-color: #ddd;}
#abc th {
padding-top: 12px;
padding-bottom: 10px;
text-align: center;
background-color: #000000b3;
color: #FFFFFF;
}
#abc td + td {
text-align: center;
}
</style>
</head>
<body>
<div>
<p>Here is my code.
Here is my code.
Here is my code.
Here is my code.
Here is my code.
</p>
<p>
Here is my code.
<br/>
Here is my code.
</p>
<p>Here is my code.</p>
<div>
<div>
<div class="content">
<table id="abc" style="width:100%" >
<div>
<thead>
<tr>
<th width="10%">column_1 </th>
<th width="60%">column_2 </th>
<th width="20%">column_3 </th>
<th width="10%">column_4 </th>
</tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
</thead>
</div>
<tbody>
</tbody>
</table>
<p>
Here is my code.
<br/>
Here is my code.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
问候
解决方案
请查看更新的代码。我希望它有所帮助。使用position:sticky
and top:0
for<th>
标签可以解决问题。我也清理了你的html。请看下面的代码。
HTML
<body>
<div>
<p>Here is my code. Here is my code. Here is my code. Here is my code. Here is my code.
</p>
<p>
Here is my code.
<br/> Here is my code.
</p>
<p>Here is my code.</p>
<div>
<div>
<div class="content">
<table id="abc" style="width:100%">
<div>
<thead>
<tr>
<th width="10%">column_1 </th>
<th width="60%">column_2 </th>
<th width="20%">column_3 </th>
<th width="10%">column_4 </th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
</tbody>
</div>
</table>
<p>
Here is my code.
<br/> Here is my code.
</p>
</div>
</div>
</div>
</div>
</body>
CSS
<style>
.content {
padding: 0px 40px;
overflow: auto;
height: 565px;
}
#abc {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#abc td,
#abc th {
border: 2px solid #ddd;
padding: 8px;
}
#abc td {
padding-left: 20px;
font-size: 14px;
}
#abc tr:nth-child(even) {
background-color: #f2f2f2;
}
#abc tr:hover {
background-color: #ddd;
}
#abc th {
padding-top: 12px;
padding-bottom: 10px;
text-align: center;
background-color: #000000;
color: #FFFFFF;
position: sticky;
top: 0;
}
#abc td+td {
text-align: center;
}
</style>
推荐阅读
- python - 学习 Wagtail 时 Python 模块名称冲突
- android - 我需要增加库模块的版本代码吗?
- python - 创建一个给定长度加起来为 1 的数字数组
- c - Swiss Ephemeris program swetest - Windows 和 Ubuntu 中的不同输出
- android - com.google.android.gms.common.api.ApiException: 12500,在 google 的 android firebase 项目中登录
- xml - 如何在 DataPower 中使用 XSLT 转换基于一个 XML 文件的多个 XML 并将所有请求调用到 MQ
- swiftui - Watch 上 SwiftUI 按钮中奇怪的内部视图
- reactjs - 表单上的 React-onSubmit 函数不起作用
- entity-framework - Azure 中的错误 500 Entity Framework API Rest,而不是本地
- java - 通过实体图加载元素集合时,SqlNode 的文本没有引用预期的列数错误