web-dev-qa-db-fra.com

Table CSS td width - fixe, pas flexible

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. Overflow:hidden ne fonctionne pas non plus sur les td, il me faut un moyen de cacher le texte en débordement tout en maintenant la largeur de td de 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>
htmlcsshtml-table
63
Richard Westington

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, avec et sans ellipses:

body {
    font-size: 12px;
    font-family: Tahoma, Helvetica, sans-serif;
}

table {
    border: 1px solid #555;
    border-width: 0 0 1px 1px;
}
table td {
    border: 1px solid #555;
    border-width: 1px 1px 0 0;
}

/* What you need: */
table td {
    width: 30px;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
}

table.with-Ellipsis td {   
    text-overflow: Ellipsis;
}
<table cellpadding="2" 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>

<br />

<table class="with-Ellipsis" cellpadding="2" 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>
81
Cᴏʀʏ

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

44
Dmitri

Ce n'est pas seulement la table qui croît, mais la table peut elle aussi croître. Pour éviter cela, vous pouvez attribuer au tableau une largeur fixe qui oblige en retour à respecter la largeur de la cellule:

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

(Utiliser 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 peut constituer une meilleure alternative aux autres réponses données (qui fonctionnent avec ou sans largeur fixe).

29
Daniel Rikowski

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

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.

12
Precastic

Chrome 37. pour _ non fixe table:

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

deux premiers importants! sinon, ça coule!

0
befzz