web-dev-qa-db-fra.com

Comment limiter une cellule de tableau à une ligne de texte en utilisant CSS?

J'ai une table d'utilisateurs où chaque ligne contient leurs noms, adresse e-mail, etc. Pour certains utilisateurs, cette ligne est haute d'une ligne de texte, pour d'autres deux, etc. Mais je voudrais que chaque ligne du tableau soit haute d'une ligne de texte, tronquant le reste.

J'ai vu ces deux questions:

En fait, ma question est exactement similaire à la première, mais comme le lien est mort, je ne peux pas l'étudier. Les deux réponses disent d'utiliser white-space: nowrap. Mais cela ne fonctionne pas, peut-être que je manque quelque chose.

Comme je ne peux pas vous montrer le code, j'ai reproduit le problème:

<style type="text/css">
td {
    white-space: nowrap;
    overflow: hidden;
    width: 125px;
    height: 25px;
}
</style>

<div style="width:500px">
<table>
    <tr>
        <td>lorem ipsum here... blablablablablablablablablabla</td>
        <td>lorem ipsum here... blablablablablablablablablabla</td>
        <td>lorem ipsum here... blablablablablablablablablabla</td>
        <td>lorem ipsum here... blablablablablablablablablabla</td>
    </tr>
</table>
</div>

Sans pour autant white-space le tableau mesure 500 pixels de large et le texte comporte plusieurs lignes.

Mais white-space: nowrap fait que le navigateur ignore simplement la directive width et augmente la largeur de la table jusqu'à ce que toutes les données tiennent sur une seule ligne.

Qu'est-ce que je fais mal?

csshtml-tableoverflow
36
Tomaka17

le débordement ne fonctionnera que s'il sait par où commencer à le considérer comme débordé. Vous devez définir l'attribut width et height de <td>

PRENDRE 2

Essayez d'ajouter table-layout: fixed; width:500px; au style de la table.

MISE À JOUR 3

a confirmé que cela fonctionnait: http://jsfiddle.net/e3Eqn/

22
Mike Sherov

Ajoutez ce qui suit à votre feuille de style:

table { white-space: nowrap; }

33
Googuez

Ajoutez ce qui suit à votre feuille de style:

table{
     width: 500px; table-layout:fixed;
}

Vous devez ajouter la largeur du tableau pour vous assurer que la propriété suivante adaptera les éléments à la taille spécifiée. La propriété table-layout oblige le navigateur à utiliser une disposition fixe dans les 500 pixels qui lui sont donnés.

6
cm2
  <table border="1" style="width:200px">
<tr>
    <td>Column 1</td><td>Column 2</td>
</tr>
<tr>
   <td nowrap="nowrap">
    
                Single line cell just do it</td>
   <td>
        
                multiple lines here just do it</div></td>
</tr>
</table>

Simple et utile. utiliser le code ci-dessus pour

2
user2782717