我试图在向下滚动时使表格标题粘在顶部。
我正在使用此处提供的解决方案:css-tricks.com/persistent-headers/。
但是,当我尝试使用它时,表头无法保持其宽度。
function UpdateTableHeaders() {
$(".persist-area").each(function() {
var el = $(this),
offset = el.offset(),
scrollTop = $(window).scrollTop(),
floatingHeader = $(".floatingHeader", this)
if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
floatingHeader.css({
"visibility": "visible"
});
} else {
floatingHeader.css({
"visibility": "hidden"
});
};
});
}
$(function() {
var clonedHeaderRow;
$(".persist-area").each(function() {
clonedHeaderRow = $(".persist-header", this);
clonedHeaderRow
.before(clonedHeaderRow.clone())
.css("width", clonedHeaderRow.width())
.addClass("floatingHeader");
});
$(window)
.scroll(UpdateTableHeaders)
.trigger("scroll");
});
.floatingHeader {
position: fixed;
top: 0;
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table class="persist-area">
<tr class="persist-header">
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
如何使表格列对齐并看起来自然?
非常感谢任何帮助!
最佳答案
好吧,当您将 position: fixed;
放在克隆的标题行上时,它不再位于表的上下文中,因为它是 fixed
。这意味着标题单元格宽度不会采用数据单元格宽度的宽度,因为固定标题不再是表格的一部分。
即使您将克隆标题的宽度设置为与“不固定”标题行的宽度相匹配,如果未设置宽度,单元格也只会占用其单元格内容的宽度。因此,您会在图像中看到“折叠”的外观。
要解决此问题,您需要显式设置 .floatingHeader
的单元格宽度以匹配表格单元格的单元格宽度。您还需要将 .floatingHeader
的 display
设置为 table
以使其表现得像一个表格,因为请记住它不再位于表的上下文。
因此您更新后的 CSS 可能如下所示:
.floatingHeader {
position: fixed;
top: 0;
visibility: hidden;
display: table; /*Added*/
}
.floatingHeader th,
.persist-area th,
.persist-area td {
padding: 2px 10px;
width: 33%; /*All cells must match widths*/
}
参见 this fiddle用于演示。
更新
要在浏览器窗口调整大小时将标题大小与表格同步,您可以附加一个同步固定标题和原始标题宽度的事件:
$(window).resize(function(){
var w = $(".persist-header").width();
$(".floatingHeader").width(w);
});
查看此 fiddle演示(调整框架窗口的大小)
关于javascript - 滚动时粘性表格标题不保持宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46814652/