En-tête de tableau collant ne changeant pas de largeur lorsque la fenêtre est redimensionnée

Question

J'ai un en-tête de tableau collant en haut lorsque je le fais défiler vers le bas. J'utilise la solution fournie ici: css-tricks.com/persistent-headers/.

Toutefois, lorsque je redimensionne la fenêtre, l'en-tête de la table collante ne redimensionne pas et ne correspond pas à la largeur des colonnes de la table ci-dessous. L'en-tête de table reste juste comme la taille fixe et je ne suis pas sûr de la meilleure façon d'aborder ceci.

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>

Comment puis-je faire aligner les colonnes de la table lorsque les fenêtres sont redimensionnées?

Toute aide serait grandement appréciée!

Answer 1

Essayez d'ajouter

text-align: left; 

à votre classe persist-header. Ou ajoutez-le en tant que style en ligne.

---

Découvrez this fiddle.