Comment définir la hauteur maximale pour une cellule de table?

J’ai une cellule de table avec une largeur et une hauteur fixes et si le texte est trop grand, la taille de la cellule doit restr la même et le texte doit être masqué par un débordement: masqué.

div { display: table-cell height: 100px; width: 100px; overflow: hidden; vertical-align: middle; } 

La cellule de table, cependant, s’étend au-delà de 100px si trop de texte est ajouté. Des astuces pour l’empêcher de se développer?

Le texte doit avoir plusieurs lignes de long, donc la solution “white-space: nowrap” n’est pas applicable

Selon les règles CSS 2.1 , la hauteur d’une cellule de tableau est «la hauteur minimale requirejse par le contenu». Vous devez donc restreindre la hauteur indirectement en utilisant le balisage interne, normalement un élément div (

content

) et définir les propriétés de height et de overflow sur l’élément div (sans définir display: table-cell sur elle, bien sûr, car sa hauteur obéirait aux règles de la cellule de tableau CSS 2.1).

Je ne pense pas que la réponse acceptée résout réellement le problème. Vous vouliez avoir un vertical-align: middle sur le contenu des cellules de table. Mais lorsque vous ajoutez une div à l’intérieur de la table-cellule et lui donnez une hauteur, le contenu de cette DIV interne sera en haut. Vérifiez ce jsfiddle . Le débordement: caché; fonctionne bien, mais si vous réduisez le contenu de sorte qu’il ne s’agit que d’une seule ligne, cette ligne ne sera pas centrée verticalement

La solution n’est pas d’append un DIV à l’intérieur de la table-cellule mais plutôt à l’extérieur. Voici le code :

 /* some wrapper */ div.d0 { background: grey; width:200px; height: 200px; } div.table { margin: 0 auto; /* just cosmetics */ width: 150px; height: 150px; background: #eee; display: table; } div.tablecell { display: table-cell; vertical-align: middle; text-align:center; height: 100%; width: 100%; background: #aaa; } div.outer-div { height: 150px; overflow: hidden; } 
 
Lorem ipsum

Essayez quelque chose comme ça: –

  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; } 

En CSS, vous ne pouvez pas définir la hauteur maximale des cellules de la table, et si vous videz maintenant l’espace, vous ne pouvez pas le séparer avec la largeur maximale. La solution est donc de travailler sur JavaScript dans tous les navigateurs.

Donc, cela peut fonctionner pour vous.

Pour 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 300px à chaque fois, au maximum 4000px jusqu’à ce que les lignes se réduisent à la hauteur maximale (160px), 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: Limite de hauteur maximale de la solution de table HTML pour les lignes ou les cellules en augmentant la largeur de la table, Javascript

Vous pouvez effectuer l’une des opérations suivantes:

  1. Utilisez l’atsortingbut css “line-height” et définissez-le par ligne de table (), cela permettra également de centrer verticalement le contenu dans

  2. Définissez l’atsortingbut css “display” sur “block” et comme suit:

 td { display: block; overflow-y: hidden; max-height: 20px; } 

bonne chance!

Essayer

  Long text here 

Utilisez le style ci-dessous:

 div { display: fixed; max-height: 100px; max-width: 100px; overflow: hidden; } 

Avec le HTML étant:

 
your long text here

Est-ce que cela pourrait répondre à vos besoins?

  
A conssortingcted table cell By Jarett Lloyd

you CAN ressortingct the height of a table cell, so long as the contents are
encapsulated by a `<div>`
i am unable to get horizontal scroll to work.
long lines cause the table to widen.
tested only in google chrome due to sheer laziness - JK!!
most browsers will likely render this as expected
i've sortinged many different ways, but this seems to be the only nice way.

is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??

Voici ce que tu veux:

 td { max-height: whatever; max-width: whatever; overflow: hidden; }