窗口调整大小时粘滞表标题不更改宽度

时间:2017-10-20 10:35:33

标签: javascript jquery html css

当向下滚动时,我在顶部有一个粘性的表头。

我正在使用此处提供的解决方案: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");
        });
&#13;
.floatingHeader {
       position: fixed;
       top: 0;
       visibility: hidden;
     }
.floatingHeader th, .persist-area th, .persist-area td {
       width: 14.285%;
     }
&#13;
<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>
&#13;
&#13;
&#13;

在调整窗口大小时,如何使表格列对齐?

任何帮助都将受到高度赞赏!

1 个答案:

答案 0 :(得分:0)

尝试添加

text-align: left;

到你的persist-header课程。或者将其添加为内联样式。

查看this fiddle