スティッキーテーブルヘッダーがウィンドウのサイズ変更時に幅を変更しない

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>

？

ご協力いただければ幸いです。あなたのpersist-headerクラスに

text-align: left; 

を追加

Answer 1

してみてください。または、インラインスタイルとして追加します。

---

チェックアウトthis fiddle。