我正在尝试在表滚动here期间将thead固定在顶部,但没有任何结果。
我像这样通过JS尝试过,但是不起作用...
<script>
document.getElementById("tablepress-10").addEventListener("scroll", function() {
var translate = "translate(0," + this.scrollTop + "px)";
this.querySelector("thead").style.transform = translate;
});
</script>
我也尝试过
JS
<script type="text/javascript">
jQuery(document).ready(function($){
var table = $("#tablepress-10");
$(window).scroll(function() {
var windowTop = $(window).scrollTop();
if (windowTop > table.offset().top) {
$("thead", table).addClass("Fixed").css("top", windowTop);
}
else {
$("thead", table).removeClass("Fixed");
}
});
});
</script>
CSS:
#tablepress-10 thead.Fixed
{
position: absolute;
}
编辑:我也尝试了这个与我们的结果
<script>
jQuery(document).ready(function($){
// Change the selector if needed
var $table = $('table.tablepress-id-10'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;
// Adjust the width of thead cells when window resizes
$(window).resize(function() {
// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
return $(this).width();
}).get();
// Set the width of thead columns
$table.find('thead tr').children().each(function(i, v) {
$(v).width(colWidth[i]);
});
}).resize(); // Trigger resize handler
});
</script>
的CSS
有任何提示吗?
感谢您的建议:D
PS:我正在使用Wordpress。
最佳答案
可以给表主体加上overflow: sroll
吗?
在stackoverflow的另一篇文章中对此进行了解释。
HTML table with 100% width, with vertical scroll inside tbody
关于javascript - 表:滚动期间修复thead,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38613650/