[CSS]Table scrollable version display:sticky

Table scrollable verticalement (Non compatible IExplorer)

Structure HTML de base

<div class="cadre-table-scroll">
  <table class="table-scroll">
    <thead>
      <tr>
        <th></th> <th></th> <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td> <td></td> <td></td>
      </tr>
      <!-- la suite des données de la table -->
    </tbody>
    <tfoot>
      <tr>
        <td colspan="5"></td>
      </tr>
    </tfoot>
  </table>
</div>

La <table> est placée dans un conteneur, ici une <div>, afin de définir la hauteur d'affichage pour celle-ci.

Le rendu

Le CSS pour le scroll

/*-- pour scroll actif --*/
.cadre-table-scroll {
  display: inline-block;
  height: 20em;
  overflow-y: scroll;
}
.table-scroll thead th {
  position: sticky;
  top: 0;
}
.table-scroll tfoot td {
  position: sticky;
  bottom: 0;
}

Le CSS cosmétique

Le CSS suivant est juste là pour « styler » la <table>.

.table-scroll {
}