55 votes

Comment masquer le débordement des lignes du tableau ?

Dans certains tableaux, les données sont trop volumineuses pour être insérées. La cellule est donc agrandie verticalement pour tenir compte de cette situation. Ainsi, les lignes qui présentent un débordement sont deux fois plus hautes que les lignes contenant des données moins volumineuses. C'est inacceptable. Comment puis-je forcer le tableau à avoir la même hauteur de ligne de 1em ?

Voici un balisage qui reproduit le problème. Le tableau ne doit avoir que la hauteur d'une ligne, le texte débordant étant masqué.

<!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>

98voto

Russ Cam Points 58168

Besoin de spécifier deux attributs, table-layout:fixed sur table y white-space:nowrap; sur les cellules. Vous devez également déplacer le overflow:hidden; aux cellules aussi

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

Voici une démo . Testé dans Firefox 3.5.3 et IE 7

22voto

user645077 Points 161

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, je place généralement le contenu de la cellule dans une balise span avec un class et appliquer un width .

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

8voto

Troy Alford Points 8676

Dans la plupart des navigateurs modernes, vous pouvez désormais 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 posts 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 un débordement bien caché dans tout le tableau. Fonctionne dans les derniers Chrome, Safari, Firefox et IE. Je n'ai pas testé les versions d'IE antérieures à la 9, mais je pense que cela fonctionnera jusqu'à la 7, et vous aurez peut-être même la chance de voir le support de la 5.5 ou de la 6 ;).

1voto

Popara Points 180

Le seul inconvénient (semble-t-il) est que la largeur des cellules des tableaux est identique. les largeurs des cellules du tableau sont identiques. Existe-t-il un moyen de contourner ce problème à l'adresse ? moyen de contourner ce problème ? - Josh Stodola 12 octobre à 15:53

Il suffit de définir la largeur du tableau et la largeur de chaque cellule du tableau.

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

Cela fonctionne comme un charme :o)

0voto

Marco Points 2652

Si 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 : Tronquer les cellules du tableau, mais les faire tenir autant que possible ).

Pour utiliser le plugin, il suffit de taper

$('selector').tableoverflow();

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

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X