根据此example.,我在表中有一个“持久头”
该表本身是使用Bootstrap 2.3构建的
我的问题:如果滚动,表标题列与表列不匹配。
不滚动:
向下滚动:
HTML:
<div id="page-wrap">
<table class="table table-hover persist-area">
<thead>
<tr class="persist-header">
<th></th>
<th style="text-align:right"></th>
<th style="text-align:right">one</th>
<th style="text-align:right">two</th>
<th style="text-align:right">three</th>
<th style="text-align:right">four</th>
<th style="text-align:right">five</th>
<th style="text-align:right">six</th>
<th style="text-align:right">seven</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
<td style="text-align:right;">
</td>
<td style="text-align:right">
</td>
<td style="text-align:right">
</td>
<td style="text-align:right">
blublu
</td>
<td style="text-align:right">
</td>
<td style="text-align:right">
</td>
<td style="text-align:right">
</td>
<td style="text-align:right">
</td>
</tr>
</tbody>
</table>
CSS:
* {
margin: 0;
padding: 0;
}
h1 {
margin: 0 0 20px 0;
}
p {
margin: 0 0 20px 0;
}
#page-wrap {
margin: 50px auto;
}
table {
border-collapse: collapse;
}
th {
width: 200px;
}
/*this one is the replacement for scrolling*/
.floatingHeader {
position: fixed;
top: 40px;
visibility: hidden;
background-color: #fff;
border-bottom: 2px solid #E4205C;
}
JS:
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");
});
jsfiddle DEMO
最佳答案
This解决了我的问题。
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
关于javascript - 粘性标题列与表列不匹配,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/18623969/