Comment afficher une barre de défilement dans un tableau html ?

Question

Je suis en train d'écrire une page où j'ai besoin qu'un tableau html conserve une taille définie. J'ai besoin que les en-têtes en haut du tableau y restent en permanence, mais j'ai aussi besoin que le corps du tableau défile quel que soit le nombre de lignes ajoutées au tableau.

Je veux que cela ressemble à la méthode 2 de cette url : http://www.cssplay.co.uk/menu/tablescroll.html

J'ai essayé de le faire, mais aucune barre de défilement n'apparaît :

tbody {
  height: 80em;
  overflow: scroll;
}

<table border=1 id="qandatbl" align="center">
  <tr>
    <th class="col1">Question No</th>
    <th class="col2">Option Type</th>
    <th class="col1">Duration</th>
  </tr>

  <tbody>
    <tr>
      <td class='qid'></td>
      <td class="options"></td>
      <td class="duration"></td>
    </tr>
  </tbody>
</table>

Answer 1

Il convient de noter qu'en fonction de votre objectif (le mien était le remplissage automatique des résultats d'une barre de recherche), vous pouvez souhaiter que la hauteur soit modifiable et que la barre de défilement n'existe que si la hauteur est supérieure à cette valeur.

Si vous voulez cela, remplacez height: x; con max-height: x; y overflow:scroll con overflow:auto .

En outre, vous pouvez utiliser overflow-x y overflow-y si vous le souhaitez, et la même chose fonctionne évidemment à l'horizontale avec width : x;

Answer 2

Si vous arrivez au point où toutes les solutions mentionnées ne fonctionnent pas (comme cela a été le cas pour moi), faites ceci :

• Créez deux tableaux. L'un pour l'en-tête et l'autre pour le corps du texte.
• Donnez aux deux tableaux des conteneurs parentaux/divisions différents.
• Style de la div du deuxième tableau pour permettre le défilement vertical de son contenu.

Comme ceci, dans votre HTML

<div class="table-header-class">
    <table>
       <thead>
          <tr>
            <th>Ava</th>
            <th>Alexis</th>
            <th>Mcclure</th>
          </tr>
       </thead>
    </table>
</div>
<div class="table-content-class">
   <table>
       <tbody>
          <tr>
            <td>I am the boss</td>
            <td>No, da-da is not the boss!</td>
            <td>Alexis, I am the boss, right?</td>
          </tr>
       </tbody>
    </table>
</div>

Ensuite, le parent du deuxième tableau doit être conçu de manière à permettre le défilement vertical, dans votre fichier CSS

    .table-content-class {
        overflow-y: scroll;    // use auto; or scroll; to allow vertical scrolling; 
        overflow-x: hidden;    // disable horizontal scroll 
    }

Answer 3

Très facile, il suffit d'insérer le tableau dans une div qui a pour nom overflow-y:scroll; y overflow-x:scroll et faire en sorte que la div ait une largeur et une longueur inférieures à celles du tableau. CELA FONCTIONNERA !!!

Answer 4

Le CSS : div{ overflow-y:scroll; overflow-x:scroll; width:20px; height:30px; } table{ width:50px; height:50px; }

Le tableau et le DIV qui l'entoure peuvent avoir la taille que vous souhaitez, assurez-vous simplement que le DIV est plus petit que le tableau. Le tableau doit OBLIGATOIREMENT se trouver à l'intérieur du DIV.

Answer 5

Ajouter une table

style="overflow-x:auto;"

<table border=1 id="qandatbl" align="center" style="overflow-x:auto;">
    <tr>
    <th class="col1">Question No</th>
    <th class="col2">Option Type</th>
    <th class="col1">Duration</th>
    </tr>

   <tbody>
    <tr>
    <td class='qid'></td>
    <td class="options"></td>
    <td class="duration"></td>
    </tr>
    </tbody>
</table>

style="overflow-x:auto ;"``.