Comment masquer le dépassement de ligne du tableau?

J'ai quelques tables html où les données textuelles sont trop grandes pour tenir. Ainsi, il agrandit la cellule verticalement pour s'adapter à cela. Donc maintenant les lignes qui ont le débordement sont deux fois plus grandes que les lignes avec de plus petites quantités de données. C'est inacceptable. Comment puis-je forcer la table à avoir la même hauteur de ligne de 1em?Comment masquer le dépassement de ligne du tableau?

Voici un balisage qui reproduit le problème. La table ne devrait être que la hauteur d'une ligne, avec le texte débordant caché.

<!DOCTYPE html> 

<html> 
    <head> 
    <title>Test</title> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <style type="text/css"> 
     table { width:250px; } 
     table tr { height:1em; overflow:hidden; } 
    </style> 
    </head> 
    <body> 
    <table border="1"> 
     <tr> 
     <td>This is a test.</td> 
     <td>Do you see what I mean?</td> 
     <td>I hate this overflow.</td> 
     </tr> 
    </table> 
    </body> 
</html>

Source

2009-10-12 Josh Stodola

Une raison particulière pour laquelle vous utilisez un '

' plutôt que de le faire avec divs/spans + CSS? La 2ème méthode est plus douloureuse à obtenir mais offre une plus grande flexibilité. Je ne suis pas sûr qu'il soit possible de faire ce que vous voulez en utilisant une table ordinaire. –

+68

J'utilise une 'table' parce que j'affiche des données tabulaires! –

Répondre

Nécessité de préciser deux attributs, table-layout:fixed sur table et white-space:nowrap; sur les cellules. Vous devez également déplacer le overflow:hidden; aux cellules trop

table { width:250px;table-layout:fixed; } 
table tr { height:1em; } 
td { overflow:hidden;white-space:nowrap; }

Here's a Demo. Testé dans Firefox 3.5.3 et IE 7

Source

2009-10-12 14:58:49

Seul bémol (semble-t-il), c'est que les largeurs des cellules du tableau sont identiques. Un moyen de contourner cela? –

Pas aussi loin que je sache - je crois que l'on fait une hypothèse sur la partie des navigateurs qui, étant donné qu'aucune largeur de cellule individuelle n'est définie, divise la largeur de la table de manière égale entre le nombre de cellules. La seule façon possible de contourner ce que je peux penser serait de calculer une largeur pour chaque cellule en fonction du nombre de caractères que chacun contient (sur le nombre total de caractères pour toutes les cellules), que ce soit le serveur ou le client (le premier étant probablement le choix le plus performant). Est-ce que cela semble exagéré? –

sur le nombre total de caractères dans toutes les cellules sur la ligne en question est ce que je voulais dire dans mon dernier commentaire :) –

de Seul bémol (il semble), est que la largeur des cellules de table sont identiques. comment y remédier? - Josh Stodola 12 octobre à 15:53

Il suffit de définir la largeur de la table et la largeur pour chaque cellule de table

quelque chose comme

table {border-collapse:collapse; table-layout:fixed; width:900px;} 
th {background: yellow; } 
td {overflow:hidden;white-space:nowrap; } 
.cells1{width:300px;} 
.cells2{width:500px;} 
.cells3{width:200px;}

Il fonctionne comme un charme: o)

Source

2009-11-05 15:12:03 Popara

Mais la largeur fluctuera en fonction de la quantité de données à afficher à l'intérieur. Ce n'est pas comme si j'utilisais des polices à espacement fixe ici !! –

En général, si vous utilisez white-space: nowrap; c'est probablement parce que vous savez quelles colonnes vont contenir du contenu qui enveloppe (ou étire la cellule). Pour ces colonnes, j'emballe généralement le contenu de la cellule dans un span avec un attribut spécifique class et applique un width spécifique.

Exemple:

HTML:

<td><span class="description">My really long description</span></td>

CSS:

span.description { 
    display: inline-block; 
    overflow: hidden; 
    white-space: nowrap; 
    width: 150px; 
}

Source

2011-03-04 16:15:16 user645077

Fonctionne vraiment bien .. – Ben

Merci c'était très utile. –

Meilleure approche que la définition de la table entière fixe. –

Dans la plupart des navigateurs modernes, vous pouvez maintenant spécifier:

<table> 
<colgroup> 
    <col width="100px" /> 
    <col width="200px" /> 
    <col width="145px" /> 
</colgroup> 
<thead> 
    <tr> 
    <th>My 100px header</th> 
    <th>My 200px header</th> 
    <th>My 145px header</th> 
    </tr> 
</thead> 
<tbody> 
    <td>100px is all you get - anything more hides due to overflow.</td> 
    <td>200px is all you get - anything more hides due to overflow.</td> 
    <td>100px is all you get - anything more hides due to overflow.</td> 
</tbody> 
</table>

Ensuite, si vous appliquez les styles des postes ci-dessus, comme suit:

table { 
    table-layout: fixed; /* This enforces the "col" widths. */ 
} 
table th, table td { 
    overflow: hidden; 
    white-space: nowrap; 
}

Le résultat vous donne trop-plein bien caché tout au long de la table. Fonctionne dans les derniers Chrome, Safari, Firefox et IE. Je n'ai pas testé dans IE avant 9 - mais je pense que cela fonctionnera aussi loin que 7, et vous pourriez même avoir la chance de voir le soutien 5.5 ou 6. ;)

Source

2012-06-13 21:15:21

Si le javascript est accepté comme réponse, j'ai créé un plugin jQuery pour résoudre ce problème (pour plus d'informations sur le problème, voir CSS: Truncate table cells, but fit as much as possible).

Pour utiliser le plugin type juste

$('selector').tableoverflow();

Plugin:https://github.com/marcogrcr/jquery-tableoverflow

Exemple complet:http://jsfiddle.net/Cw7TD/3/embedded/result/

Source

2013-05-13 14:14:36 Marco

Here's quelque chose que j'ai essayé. Fondamentalement, je mets le contenu "flexible" (le td qui contient des lignes qui sont trop longues) dans un conteneur div de 1 ligne, avec un débordement caché. Ensuite, je laisse le texte s'enrouler dans l'invisible. Vous obtenez des pauses au motbreaks, pas seulement une coupure en douceur.

table { 
    width: 100%; 
} 

.hideend { 
    white-space: normal; 
    overflow: hidden; 
    max-height: 1.2em; 
    min-width: 50px; 
} 
.showall { 
    white-space:nowrap; 
} 

<table> 
    <tr> 
     <td><div class="showall">Show all</div></td> 
     <td> 
      <div class="hideend">Be a bit flexible about hiding stuff in a long sentence</div> 
     </td> 
     <td> 
      <div class="showall">Show all this too</div> 
     </td> 
    </tr> 
</table>

Source

2014-02-27 08:52:53

Je devrais ajouter que l'avantage ici est que je n'ai pas besoin de définir des largeurs absolues de colonnes. Le design est fluide. –

Le problème ici est, comment savez-vous à quelle cellule attribuer quelle classe? À moins de taper manuellement toutes les pages dont vous aurez besoin, style Web 1.0, ce n'est pas une solution fourre-tout. –

envelopper la table dans une div class = "conteneur"

div.container { 
    width: 100%; 
    overflow-x: auto; 
}

puis

#table_id tr td { 
    white-space:nowrap; 
}

résultat

Source

2018-03-03 08:57:13

Questions connexes