0

除了浮动标题出现在原始标题右侧一个像素之外，此代码运行良好。

有什么办法让它们完全对齐吗？因此，当您滚动标题时，标题会平稳浮动并且似乎不会向右移动？

<title>Table with Persistent Headers</title>
<link rel="stylesheet" href="css/Styles.css">
<style>
.floatingHeader {
  position: fixed;
  top: 0;
  visibility: hidden;
}
</style>
<style>
th {background-color:#FF0000;}
</style>
 <script src="js/wiz/jquery-1.8.0.js"></script>
 <script>
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"
           });
       };
   });
}

// DOM Ready
$(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");

});
</script>
</head>
<body>
    <div id="page-wrap">
        <h1>Persistent Headers</h1>

        <p>Scroll down and watch the table headers stay with the table when they normally would be scrolled off the screen.</p>

    <table class="persist-area">
        <thead>
          <tr class="persist-header">
             <th>Column One Header</th>
             <th>Column Two Header</th>
          </tr>
        </thead>
        <tbody>
          <tr>
             <td>table1 data1</td>
             <td>table1 data1</td>
          </tr>
          <tr>
             <td>table1 data2</td>
             <td>table1 data2</td>
          </tr>
          <tr>
             <td>table1 data3</td>
             <td>table1 data3</td>
          </tr>
          <tr>
             <td>table1 data4</td>
             <td>table1 data4</td>
          </tr>
          <tr>
             <td>table1 data5</td>
             <td>table1 data5</td>
          </tr>
          <tr>
             <td>table1 data6</td>
             <td>table1 data6</td>
          </tr>
          <tr>
             <td>table1 data7</td>
             <td>table1 data7</td>
          </tr>
           </tbody>
      </table>


</body>
</html>

谢谢

4

2 回答 2

1

它向右移动的原因是因为您正在应用于position: fixed表格中的元素，并且将“位置”赋予诸如 tr、td 或 th 之类的元素并不是一个真正的好习惯，因为它们不是为表格制作的.

margin-left:-1px;但是，在您的情况下，如果您将 a 添加到.floatingHeader课程中，它似乎可以工作。

.floatingHeader {
 position: fixed;
 top: 0;
 visibility: hidden;
 margin-left: -1px; // *** This one here ***
}
于 2013-09-12T08:25:02.607 回答
0

设置left位置可以解决问题：

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",
            left: offset.left // <-- set left position
           });
       } else {
           floatingHeader.css({
            "visibility": "hidden"
           });
       };
   });
}

这是一个工作示例：http: //jsfiddle.net/UpAeu/

于 2013-09-12T08:25:09.170 回答