0%

Fixer les entêtes d'un tableau en css

savoir image

Mettre en forme un tableau HTML n'est pas le travail le plus passionnant au monde, mais c'est parfois un passage obligé. Dans ce savoir, nous verrons comment fixer les entêtes d'un tableau HTML, en utilisant du css.

 

Style exemple :
#exempleFixedEntete {
    overflow: auto;
    height: 80vh;
}

/* Table sticky headers */
table.table>thead>tr>th {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 2;
}

 

HTML exemple :
<!-- La div qui contient le tableau. Elle doit avoir un height défini. -->
<div id="list-semaines" class="tab-content has-padding">
   <table class="table xtable-bordered" style="height: 1px">
      <thead>
         <tr>
            <th></th>
            <th></th>
             <th></th>
            <th></th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
         </tr>
          ..........
      </tbody>
   </table>
</div>
Catégories
CSS 1 HTML5 1 JavaScript 1 PHP 3 Symfony 1
Savoirs les plus récents
0 commentaires