html - same - td width css




CSS table td width-fixe, pas flexible (6)

Ce n’est pas seulement la cellule de table qui grandit, la table elle - même peut aussi se développer. Pour éviter cela, vous pouvez affecter une largeur fixe à la table, ce qui en retour oblige à respecter la largeur de la cellule:

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

(Utilisation du overflow: hidden et / ou text-overflow: ellipsis sont facultatifs mais fortement recommandés pour une meilleure expérience visuelle)

Donc, si votre situation vous permet d'affecter une largeur fixe à votre table, cette solution pourrait être une meilleure alternative aux autres réponses données (qui fonctionnent avec ou sans largeur fixe)

J'ai une table et je veux définir une largeur fixe de 30px sur les 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 débordant et de garder la largeur de 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>

Ce n'est pas le plus joli CSS, mais j'ai réussi à le faire:

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>


Chrome 37. pour table non fixe:

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

les deux premiers importants! sinon - son écoulement!


Il suffit de diviser le nombre de td à 100%. Exemple, vous avez 4 td:

<html>
<table>
<tr>
<td style="width:25%">This is a text</td>
<td style="width:25%">This is some text, this is some text</td>
<td style="width:25%">This is another text, this is another text</td>
<td style="width:25%">This is the last text, this is the last text</td>
</tr>
</table>
</html>

Nous utilisons 25% dans chaque td pour maximiser l'espace de 100% de la table entière


Mettez une div dans td et donnez la width:50px;overflow: hidden; style suivante width:50px;overflow: hidden; à la div
Lien Jsfiddle

<td>
  <div style="width:50px;overflow: hidden;"> 
    <span>A long string more than 50px wide</span>
  </div>
</td>







table