粘貼表格標題在窗口大小調整時不改變寬度

Question

滾動時，表格頂部粘貼在頂部。

我使用的是這裏提供的解決方案：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"); 
 
     });

.floatingHeader { 
 
     position: fixed; 
 
     top: 0; 
 
     visibility: hidden; 
 
    } 
 
.floatingHeader th, .persist-area th, .persist-area td { 
 
     width: 14.285%; 
 
    }

<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>

我如何重新調整窗口大小的表列排列？

任何幫助將不勝感激！

Answer 1

嘗試增加

text-align: left; 

您persist-header類。或者將它添加爲內聯樣式。

---

結賬this fiddle。