web-dev-qa-db-fra.com

Définir une hauteur maximale sur une table

J'essaye de concevoir une page où il y a quelques tables. Il semble que les tables de coiffure soient beaucoup plus douloureuses qu’elles devraient l’être.

Le problème est le suivant. Les tables doivent avoir une hauteur fixe et afficher un espace blanc en bas - lorsqu'il y a trop peu de contenu - ou une barre de défilement verticale - quand il y en a trop. Ajoutez à cela que les tables ont un en-tête qui ne doit pas défiler.

Autant que je sache, la thead pas défilement est le comportement par défaut des tables. Et un étirement tfoot pourrait bien servir à remplir d’espaces blancs. Malheureusement, il semble que toutes les contraintes que je peux mettre sur la hauteur de la table soient joyeusement ignorées. j'ai essayé

table {
    height: 600px;
    overflow: scroll;
}

J'ai essayé avec max-height. J'ai essayé de positionner la table absolument et de donner les coordonnées du haut et du bas. J'ai essayé de modifier manuellement la hauteur dans Firebug pour voir s'il s'agissait d'un problème de spécificité CSS. J'ai aussi essayé de définir la hauteur sur tbody. Le fait est que la table reste toujours exactement haute car son contenu , quels que soient mes efforts.

Bien sûr, je pourrais simuler une table avec une structure div, mais en réalité est une table, et je crains d’utiliser des divs, je risque de rencontrer un problème où certaines colonnes risquent de ne pas être correctement alignées.

Comment suis-je censé donner une hauteur à une table?

htmlcsscss-tables
39
Andrea

NOTEcette réponse est maintenant incorrecte . J'y reviendrai peut-être plus tard.

Comme d'autres l'ont fait remarquer, vous ne pouvez pas définir la hauteur d'un tableau sauf si vous définissez son affichage sur block, mais vous obtenez alors un en-tête de défilement. Donc, ce que vous cherchez, c’est de définir height et display:block uniquement sur tbody:

<table style="border: 1px solid red">
    <thead>
        <tr>
            <td>Header stays put, no scrolling</td>
        </tr>
    </thead>
    <tbody style="display: block; border: 1px solid green; height: 30px; overflow-y: scroll">
        <tr>
            <td>cell 1/1</td>
            <td>cell 1/2</td>
        </tr>
        <tr>
            <td>cell 2/1</td>
            <td>cell 2/2</td>
        </tr>
        <tr>
            <td>cell 3/1</td>
            <td>cell 3/2</td>
        </tr>
    </tbody>
</table>

Voici le violon .

25
Dan Dascalescu

Ajoutez display:block; aux fichiers css de la table. (En d'autres termes, indiquez à la table d'agir comme un élément de bloc plutôt qu'une table.)

violon ici

8
Scott

Vous pouvez le faire en utilisant les fichiers css suivants.

.scroll-thead{
    width: 100%;
    display: inline-table;
}

.scroll-tbody-y
{
    display: block;
    overflow-y: scroll;
}

.table-body{
    height: /*fix height here*/;
}

Voici le HTML.

<table>
 <thead class="scroll-thead">
          <tr> 
           <th>Key</th>
           <th>Value</th>
          </tr> 
         </thead>
         <tbody class="scroll-tbody-y table-body">
          <tr> 
          <td>Blah</td> 
          <td>Blah</td> 
          </tr> 
</tbody>
</table>

JSFiddle

4
Sibi John

Dans Tableaux, pour la hauteur minimale des cellules du tableau ou la hauteur des lignes, utilisez css height: à la place de min-height:.

ET

For Limiter la hauteur maximale de toutes les cellules ou lignes du tableau avec Javascript:

Ce script convient aux tables de débordement horizontales.

Ce script augmente la largeur de la table de 300 px chaque fois (maximum 4000 px) jusqu'à ce que les lignes soient réduites à une hauteur maximale (160 px), et vous pouvez également modifier les nombres selon vos besoins.

var i = 0, row, table = document.getElementsByTagName('table')[0], j = table.offsetWidth;
while (row = table.rows[i++]) {
    while (row.offsetHeight > 160 && j < 4000) {
        j += 300;
        table.style.width = j + 'px';
    }
}

Source: Solution de table HTML - Limite de hauteur maximale pour les lignes ou les cellules en augmentant la largeur de la table, Javascript

0
Mr. Rick

Utilisez des divs avec hauteur maximale et hauteur minimale autour du contenu à faire défiler.

<tr>
    <td>
        <div>content</div>
    </td>
</tr>

td div{
    max-height:20px;
}

https://jsfiddle.net/ethanabrace/4w0ksczr/

0
Beefjeff

Cela ressemble beaucoup à this question. De là, il semble que cela devrait faire l'affaire:

table {
  display: block; /* important */
  height: 600px;
  overflow-y: scroll;
}
0
Wesley