javascript - 粘性标题列与表列不匹配

Question

根据此示例，我在表中有一个“持久标题”。 表本身是用 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 演示

Answer 1

这解决了我的问题。

/* 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;
 }