web-dev-qa-db-fra.com

Définition de la hauteur maximale pour le contenu des cellules de la table

J'ai une table qui devrait toujours occuper un certain pourcentage de la hauteur de l'écran. La plupart des rangées ont une hauteur fixe, mais j’ai une rangée qui devrait s’étirer pour remplir l’espace disponible. Si le contenu d'une cellule de cette ligne dépasse de la hauteur souhaitée, j'aime le contenu à extraire avec overflow: hidden.

Malheureusement, les tables et les lignes ne respectent pas la propriété max-height. (Ceci est dans les spécifications du W3C). Quand il y a trop de texte dans la cellule, la table devient plus grande au lieu de coller au pourcentage spécifié.

Je peux obtenir le comportement de la cellule de tableau si je lui spécifie une hauteur fixe en pixels, mais cela empêche le but de l'étirer automatiquement pour remplir l'espace disponible.

J'ai essayé d'utiliser des divs, mais je n'arrive pas à trouver la formule magique. Si j'utilise des divs avec display: table,: table-row et: table-cell, les divs agissent comme une table.

Des indices sur la façon dont je peux simuler une propriété max-height sur une table?

<head>
    <style>
        table {
            width: 50%;
            height: 50%;
            border-spacing: 0;
        }
        td {
            border: 1px solid black;
        }
        .headfoot {
            height: 20px;
        }
        #content {
            overflow: hidden;
        }
    </style>
</head>
<body>
<table>
    <tr class="headfoot"><td>header</td></tr>
    <tr>
        <td>
        <div id="content">
            put lots of text here
        </div>
        </td>
        <tr>
    <tr class="headfoot"><td>footer</td></tr>
</table>
</body>
htmlcsshtml-table
38
ccleve

Nous avons finalement trouvé une réponse. Tout d’abord, le problème: le tableau se redimensionne toujours autour du contenu, plutôt que de le forcer à tenir dans le tableau. Cela limite vos options.

Nous l'avons fait en définissant la div de contenu sur display: none, en laissant la taille du tableau lui-même, puis en définissant javascript la hauteur et la largeur de la div de contenu sur la hauteur et la largeur intérieures de la balise td englobante. Afficher le contenu div. Répétez le processus lorsque la fenêtre est redimensionnée.

15
ccleve

Il suffit de placer les étiquettes dans un div à l’intérieur du TD et de définir la hauteur et le débordement .. comme ci-dessous.

<table>
<tr>
  <td><div style="height:40px; overflow:hidden">Sample</div></td>
  <td><div style="height:40px; overflow:hidden">Text</div></td>
  <td><div style="height:40px; overflow:hidden">Here</div></td>
</tr>
</table>
47
keithics

J'ai eu le même problème avec une disposition de table que je créais. J'ai utilisé la solution de Joseph Marikle, mais je l'ai également fait fonctionner pour FireFox et j'ai ajouté un style de table-rangée pour plus de précision. La solution CSS pure depuis l'utilisation de Javascript pour cela semble totalement inutile et excessive.

html

<div class='wrapper'>
    <div class='table'>
        <div class='table-row'>
            <div class='table-cell'>
                content here
            </div>
            <div class='table-cell'>
                <div class='cell-wrap'>
                    lots of content here
                </div>
            </div>
            <div class='table-cell'>
                content here
            </div>
            <div class='table-cell'>
                content here
            </div>
        </div>
    </div>
</div>

css

.wrapper {height: 200px;}
.table {position: relative; overflow: hidden; display: table; width: 100%; height: 50%;}
.table-row {display: table-row; height: 100%;}
.table-cell {position: relative; overflow: hidden; display: table-cell;}
.cell-wrap {position: absolute; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%;}

Si vous souhaitez que la table respecte un pourcentage de hauteur, vous avez besoin d'un wrapper autour de la table. Sinon, vous pouvez simplement définir une hauteur de pixel sur l'élément de table.

3
cellen

Peut-être pas croisé navigateur mais j'ai réussi à obtenir ceci: http://jsfiddle.net/QexkH/

fondamentalement, il nécessite un en-tête et un pied de page de hauteur fixe. et il positionne absolument la table.

    table {
        width: 50%;
        height: 50%;
        border-spacing: 0;
        position:absolute;
    }
    td {
        border: 1px solid black;
    }
    #content {
        position:absolute;
        width:100%;
        left:0px;
        top:20px;
        bottom:20px;
        overflow: hidden;
    }
2
Joseph Marikle

Ce que j'ai trouvé !!!, Dans les tableaux CSS td{height:60px;} fonctionne de la même manière que CSS td{min-height:60px;}

Je connais cette situation lorsque la hauteur des cellules est mauvaise. Cette solution javascript n'a pas besoin de débordement caché.

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

1
Mr. Rick

Une autre façon de contourner cela peut ne pas convenir mais sûrement la plus simple:

td {
    display: table-caption;
}
1
zak

J'ai résolu juste en utilisant ce plugin: http://dotdotdot.frebsite.nl/

il définit automatiquement une hauteur maximale à la cible et ajoute trois points

0
Francesco Borzi