javascript - 有没有办法将两个标题都固定在页面顶部?
问题描述
我需要将两个标题都固定在页面顶部。目前,只有第一个主题可以按我的意愿工作。
我已经尝试过position: sticky
, class="position-sticky"
, class="position-absolute
, etc" 以及 boostrap 提出的所有解决方案class
,但对我来说主要问题是这两个标题属于两个不同的表,一个用于标题,一个用于主要部分。如果使用class: fixed-top
它可以工作(即使只针对第一个thead),但它也覆盖了表格的一部分,这是不应该发生的事情。
这是我的 JSFiddle: https ://jsfiddle.net/m_tibo/yf8a0txL/15/
我想要实现的是能够向下滚动,同时将两个主题都固定在顶部。目前,我只能实现第一个。
谢谢您的帮助。
解决方案
你可以用这个替换你的CSS。您本质上正在寻找的是位置:固定。把它放在父母中,标题会粘住。您可能需要调整一些填充和边距才能获得所需的结果,但这应该可以解决粘性问题。
用这个 HTML 替换你的代码块:
<section class="main">
<table id="maintable">
<thead class="maintable-header">
<tr class="second-header">
<th class="blankHeader"scope="col"></th>
<th class="tableHeader" scope="col">Role</th>
<th class="tableHeader" scope="col">Project</th>
<th class="tableHeader" scope="col">Credits</th>
<th class="tableHeader" scope="col">Year</th>
</tr>
</thead>
并添加这些 CSS 类:
.second-header {
position: fixed;
top: 9%;
background:#fff;
text-align: center;
}
.tableHeader {
width: 25%;
}
推荐阅读
- ios - Xcode Server Bot 删除“未知团队”证书
- r - xts 时间序列与 if (ncol(x) == 1) { 中的错误的关系:参数长度为零
- html - HTML——将(Apple Pages 或 MS Word)类标签放在文本上
- javascript - 在 Vue.js 中,如何确保选择元素连续选择第一个选项,因为选项有条件地显示和隐藏?
- java - 如何在 Java 中拆分 String ArrayList 中的单词然后反转它们?
- django - Django 表单和模型
- node.js - Hapi.js - 如何将连接传递给插件
- javascript - Javascript设置属性onchange事件以选择并显示到控制台在第一次选择后停止
- webforms - Microsoft.AspNetCore.HttpOverrides 但适用于 ASP.NET 网络表单
- ruby - Ruby - 没有从我的标题中获得最后修改