web-dev-qa-db-fra.com

Tableau HTML avec en-tête et pied de page fixes et corps déroulant sans largeurs fixes

Je veux créer un tableau avec thead et tfoot fixes et un tbody défilant!

J'ai essayé plusieurs approches, à la fois CSS uniquement et CSS + Javascript, mais elles sont toutes faibles et peu fiables et je peux facilement les casser les en modifiant le balisage dans la démo.

Ce que je veux, c'est un moyen pour que la table se comporte comme une table , cela signifie que le navigateur ( automatiquement ajuster les colonnes en fonction du contenu (à la fois au chargement de la page qu'en cas de redimensionnement de la fenêtre) et que dans ces scénarios:

  1. si le contenu de l'en-tête de la colonne (thead > tr > th) est plus grand que le contenu du corps de la colonne (tbody > tr > td) et plus grand que le contenu du pied de page de la colonne (tfoot > tr > td) la colonne doit être redimensionnée en fonction de la taille de l'en-tête de la colonne

  2. si le contenu du corps de la colonne (tbody > tr > td) est plus grand que le contenu de l'en-tête de la colonne (thead > tr > th) et plus grand que le contenu du pied de page de la colonne (tfoot > tr > td) la colonne doit être redimensionnée en fonction de la taille du corps de la colonne

  3. si le contenu du pied de page de la colonne (tfoot > tr > td) est plus grand que le contenu de l'en-tête de la colonne (thead > tr > th) et plus grand que le contenu du corps de la colonne (tbody > tr > td) la colonne doit être redimensionnée en fonction de la taille du pied de page de la colonne

Le table ci-dessous devrait clarifier les scénarios:

<table>
  <thead>
    <tr>
      <th>Header one *leads the width* (case 1)</th>
      <th>Header two</th>
      <th>Header three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Column one</td>
      <td>Column two *leads the width* (case 2)</td>
      <td>Column three</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer one</td>
      <td>Footer two</td>
      <td>Footer three *leads the width* (case 3)</td>
    </tr>
  </tfoot>
</table>

Je veux une solution propre (autant que possible) et fiable qui fonctionnera pour les différents scénarios, éventuellement CSS uniquement mais aussi JavaScript est OK (Vanilla et JavaScript propre, pas les plugins jQuery). Je ne me soucie pas de l'ancien support du navigateur (ce serait bien de l'avoir ou du moins d'atteindre une solution qui peut se dégrader gracieusement sur l'ancien navigateur mais c'est facultatif) ... Je peux même accepter d'utiliser divs au lieu de nœuds de table si la solution finale fonctionne comme prévu ... donc en 2016, avec un navigateur moderne et CSS est-ce possible en quelque sorte?!

MODIFIER:

Le corps doit défiler verticalement et le tableau peut avoir un nombre quelconque de colonnes

MISE À JOUR:

J'ai trouvé cette solution: https://codepen.io/daveoncode/pen/LNomBE mais je ne suis toujours pas satisfait à 100%. Le problème principal est que je ne peux pas définir des arrière-plans différents pour les cellules d'en-tête et de pied de page.

MISE À JOUR 2:

ça fonctionne maintenant!

javascripthtmlcsshtml-table
17
daveoncode

J'ai finalement mis en place une solution de travail!

Le CSS pertinent est le suivant:

.wrapper {
  width: 90%;
  position: relative;
  border: 1px solid #000;
  background: #efefef;
  overflow: hidden;
  border-radius: 7px;
}

.container {
  overflow-y: auto;
  height: 200px;
  border-top: 41px solid transparent;
  border-bottom: 41px solid transparent;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
  width: 100%;
}

td + td {
  border-left: 1px solid #fff;
}

td, th {
  border-bottom: 1px solid #fff;
  background: #efefef;
  padding: 10px;
}

thead tr th,
tfoot tr td {
  height: 0;
  line-height: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
}

thead tr th div,
tfoot tr td div {
  position: absolute;
  color: #fff;
  height: 20px;
  padding: 10px;
  margin-left: -10px;
  line-height: normal;
  width: 100%;
  z-index: 2;
  text-align: left;
  font-weight: bold;
}

thead tr th div {
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
}

tfoot tr td div {
  border-top: 1px solid #000;
}

tfoot tr td div.c1,
thead tr th div.c1 {
  background: Violet;
}

tfoot tr td div.c2,
thead tr th div.c2 {
  background: green;
}

tfoot tr td div.c3,
thead tr th div.c3 {
  background: yellow;
}

thead tr th div {
  top: 0;
}

tfoot tr td div {
  bottom: 0;
}

thead tr th:first-child div,
tfoot tr td:first-child div {
  border-left: none;
}

Et voici le balisage:

<div class="wrapper">
  <div class="container">
    <table>
      <thead>
        <tr>
          <th>
            Header one *leads the width* (case 1)
            <div class="c1">
              Header one *leads the width* (case 1)
            </div>
          </th>
          <th>
            Header two
            <div class="c2">
              Header two
            </div>
          </th>
          <th>
            Header three
            <div class="c3">
              Header three
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three [first]</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three [LATEST]</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>
            Footer one
            <div class="c1">
              Footer one
            </div>
          </td>
          <td>
            Footer two
            <div class="c2">Footer two</div>
          </td>
          <td>
            Footer three *leads the width* (case 3)
            <div class="c3">Footer three *leads the width* (case 3)</div>
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

Il fonctionne sur Chrome, Firefox, Safari et IE11 (je ne sais pas comment il se comporte sur les anciens navigateurs). Voir sur codepen: https://codepen.io/daveoncode/pen/LNomBE

3
daveoncode

vous pouvez obtenir ce que vous voulez en utilisant un wrapper dans votre table (div) et créer le tr à partir de thead et tfoot a position:absolute

body {
  margin: 0
}

div {
  max-height: 500px;
  overflow-y: auto;
}

table {
  width: 100%
}

thead tr,
tfoot tr {
  position: absolute;
  left: 0;
  right: 15px;
  /* to not cover the scrollbar*/
  background: red
}

thead th,
tfoot td {
  display: inline-block;
}

thead tr {
  top: 0
}

tfoot tr {
  top: 500px/* same value has max-height from div */
}

th,
td {
  width: calc((100%/3) - 5px);
  font-size: 12px;
  text-align: center
}


/*give some space between thead and tfoot*/

tbody tr:first-of-type td {
  padding-top: 35px;
}

tbody tr:last-of-type td {
  padding-bottom: 35px;
}
<div>
  <table>
    <thead>
      <tr>
        <th>Header one *leads the width* (case 1)</th>
        <th>Header two</th>
        <th>Header three</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
      <tr>
        <td>Column one</td>
        <td>Column two *leads the width* (case 2)</td>
        <td>Column three</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Footer one</td>
        <td>Footer two</td>
        <td>Footer three *leads the width* (case 3)</td>
      </tr>
    </tfoot>
  </table>
</div>
4
dippas