web-dev-qa-db-fra.com

Comment masquer le dépassement de ligne de table?

J'ai quelques tables HTML où les données textuelles sont trop volumineuses pour tenir. Ainsi, il agrandit la cellule verticalement pour s'adapter à cela. Alors maintenant, les lignes présentant un débordement sont deux fois plus hautes que celles contenant de petites quantités de données. C'est inacceptable. Comment puis-je forcer la table à avoir la même hauteur de ligne que 1em?

Voici quelques balises qui reproduisent le problème. Le tableau ne doit avoir qu'une hauteur d'une ligne, le texte en débordement é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>
htmlcsshtml-table
52
Josh Stodola

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

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 

95
Russ Cam

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 une variable span avec un attribut class spécifique et applique une variable 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;
}
21
user645077

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 articles ci-dessus, procédez 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é dans IE avant 9 - mais je suppose que cela fonctionnera aussi loin que 7, et vous pourriez même avoir la chance d'avoir un support de 5.5 ou 6. ;)

8
Troy Alford

Voici quelque chose que j'ai essayé. Fondamentalement, je mets le contenu "flexible" (le td qui contient des lignes trop longues) dans un conteneur div ayant une ligne haute, avec débordement masqué. Puis je laisse le texte s'enrouler dans l'invisible. Vous obtenez des pauses à la rupture de mots, 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>
2
John Liungman

Seul inconvénient (semble-t-il), c'est que le les largeurs des cellules de la table sont identiques. Tout moyen de contourner cela? - Josh Stodola 12 octobre à 15h53

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)

1
Popara

encapsule la table dans un div avec class = "conteneur"

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

puis 

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

résultat 

 overflow effect

0
Dan Alboteanu

Si javascript est accepté comme réponse, j'ai créé un plugin jQuery pour résoudre ce problème (pour plus d'informations à ce sujet, voir CSS: tronquer les cellules d'un tableau, mais le plus possible ).

Pour utiliser le plugin, tapez simplement

$('selector').tableoverflow();

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

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

0
Marco