Table CSS td width - fixe, pas flexible

Question

J'ai une table et je veux définir une largeur fixe de 30px sur le td. le problème est que lorsque le texte dans le td est trop long, le td est plus large que 30px. Débordement: masqué ne fonctionne pas non plus sur le td, il me faut un moyen de cacher le texte en débordement tout en maintenant la largeur du td 30px.

 <table cellpadding="0" cellspacing="0">
    <tr>
        <td>first</td><td>second</td><td>third</td><td>forth</td>
    </tr>
    <tr>
        <td>first</td><td>this is really long</td><td>third</td><td>forth</td>
    </tr>
</table>
 

Answer 1

Ce n'est pas la plus jolie des CSS, mais cela a fonctionné:

 table td {
    width: 30px;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
}
 

Exemples jsFiddle

Answer 2

vous pouvez aussi essayer de l'utiliser:

 table {
    table-layout:fixed;
}
table td {
    width: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
}
 

http://www.w3schools.com/cssref/pr_tab_table-layout.asp

Answer 3

Ce n'est pas seulement la cellule du tableau qui est en croissance, la table elle-même peut grandir. Pour éviter cela, vous pouvez affecter une largeur fixe à la table qui, en retour, les forces de la largeur de la cellule pour être respectées:

table {
  table-layout: fixed;
  width: 120px; /* Important */
}
td {
  width: 30px;
}

(À l'aide d' overflow: hidden et/ou text-overflow: ellipsis est facultatif mais fortement recommandé pour une meilleure expérience visuelle)

Donc, si votre situation vous permet d'attribuer une largeur fixe à votre table, cette solution pourrait être une meilleure alternative à l'autre compte tenu des réponses (qui ne fonctionne avec ou sans une largeur fixe)

Answer 4

Les suggestions ci-dessus ont bouleversé la mise en page de ma table et j'ai donc utilisé:

 td {
  min-width: 30px;
  max-width: 30px;
  overflow: hidden;
}
 

C’est horrible à maintenir mais c’était plus facile que de refaire tous les CSS existants pour le site. J'espère que ça aide quelqu'un d'autre.

Answer 5

Cette solution a fonctionné pour moi ...

 <td style="white-space: normal; width:300px;">