CSS table td largeur fixe, pas flexible

J'ai un tableau et je veux mettre 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 étendue plus large que 30px. Overflow:hidden ne fonctionne pas non plus sur les td, j'ai besoin d'une façon de cacher le texte débordant et en gardant le td largeur 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>

InformationsquelleAutor Richard Westington | 2011-07-12

Ce n'est pas le plus joli, le CSS, mais j'ai eu ce travail:

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

Exemples, avec et sans ellipses:

CSS:

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;
}

HTML:

<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>

Ne fonctionne pas sous Chrome. Il crée un très étrange empilés mise en page.
Droit...d'édition. Je ne suis pas vraiment sûr de la compatibilité du navigateur ici.
Plus gros problème est que l'affichage des changements de comportement à partir d'une cellule de tableau dans un div style, avec de la marge, de bordure, de rembourrage et de l'orientation.
Ouais, j'ai l'image statique de la largeur doit être un problème de colonne de découpage. Ce n'était pas destiné à être une de résoudre tous les solution; il est adapté à des OP besoins ("je veux définir une largeur fixe de 30px sur le td").

InformationsquelleAutor Cᴏʀʏ

45

vous pouvez également 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
- Pour que cela fonctionne, je pense que vous devez encore définir une largeur sur la table elle-même. Donc, je pense que la réponse de Daniel Rikowski est plus précis.
InformationsquelleAutor Dmitri
30

Ce n'est pas seulement le cellule de tableau qui est en croissance, la table lui-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és:
```
table {
  table-layout: fixed;
  width: 120px; /* Important */
}
td {
  width: 30px;
}
```
(À l'aide de 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)
- Oui, largeur de la table est la clé!!
InformationsquelleAutor Daniel Rikowski
12

Les suggestions ci-dessus mis à la corbeille la mise en page de ma table, j'ai donc fini par utiliser:
```
td {
  min-width: 30px;
  max-width: 30px;
  overflow: hidden;
}
```
C'est horrible à maintenir, mais a été plus facile que de refaire tout le css existant pour le site. Espérons que cela aide quelqu'un d'autre.
- overflow: hidden n'est même pas nécessaire avec au moins de l'Opéra de Clignoter.
InformationsquelleAutor Precastic
0

Chrome 37.
pour les non fixe table:
```
td {
    width: 30px;
    max-width: 30px;
    overflow: hidden;
}
```
deux premiers important! d'autre - de ses flux de suite!!!

InformationsquelleAutor
-1

Cette solution a fonctionné pour moi...
```
<td style="white-space: normal; width:300px;">
```
- yep mais c'est obsolète depuis HTML4
InformationsquelleAutor diogoareia
-1

Mettre un div à l'intérieur de td et donner du style suivant width:50px;overflow: hidden; à la div

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

-5

Juste 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 afin de maximiser les 100% de l'espace de l'ensemble de la table

Cela n'a rien à voir avec la question

InformationsquelleAutor Chrisitan Joe Dulaca

Vous devez vous connecter pour publier un commentaire.