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

Je veux créer une table fixe avec thead et tfoot et un défilement tbody!

J'ai tenté plusieurs approches, à la fois CSS et CSS + Javascript, mais ils sont faibles et peu fiables, et je peux facilement pause par un changement dans le balisage dans la démo.

Ce que je veux, c'est un moyen d'avoir le tableau de se comporter comme un tableaucela signifie que le navigateur ajuster automatiquement les colonnes basé sur le contenu (à la fois au chargement de la page que dans le cas de la fenêtre de redimensionnement) et que, dans ces scénarios:

  1. si le contenu de l'en-tête de colonne (thead > tr > th) est plus grande que le contenu de la colonne du corps (tbody > tr > td) et plus grand que le contenu de la colonne du pied de page (tfoot > tr > td) de la colonne de les redimensionner selon la taille de l'en-tête de colonne
  2. si le contenu de la colonne du corps (tbody > tr > td) est plus grand que le contenu de l'en-tête de colonne (thead > tr > th) et plus grand que le contenu de la colonne du pied de page (tfoot > tr > td) de la colonne de les redimensionner selon la taille de la colonne du corps
  3. si le contenu de la colonne du pied de page (tfoot > tr > td) est plus grand que le contenu de l'en-tête de colonne (thead > tr > th) et plus grand que le contenu de la colonne du corps (tbody > tr > td) de la colonne de les redimensionner selon la taille de la colonne du pied de page

La 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 un propre (autant que possible) et fiable solution qui fonctionne pour les différents scénarios, éventuellement CSS mais aussi le JavaScript est OK (à la vanille et nettoyer JavaScript, pas de plugins jQuery).
Je ne se soucient pas de la vieille prise en charge du navigateur (il serait bien de l'avoir ou au moins de parvenir à une solution qui peut dégrader gracieusement sur de vieux navigateur, mais c'est facultatif)... je peux même accepter d'utiliser divs au lieu de table de nœuds si la solution finale fonctionne comme prévu... donc en 2016, avec un navigateur moderne et CSS est-ce possible?!

EDIT:

Le corps doit faire défiler verticalement et la table peut avoir un nombre quelconque de colonnes

Mise à JOUR:

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

Mise à JOUR 2:

il travaille maintenant!

source d'informationauteur daveoncode

  1. -6
    $.ajax({
          url: "upload.php",
          type: "POST",
          data: fd,
          processData: false,  //tell jQuery not to process the data
          contentType: false   //tell jQuery not to set contentType
        }).done(function( data ) {
            console.log("PHP Output:");
            console.log( data );
        });
        return false;
    }