Dans mon tableau, j'ai fixé la largeur de la première cellule d'une colonne à 100px ;
Cependant, lorsque le texte de l'une des cellules de cette colonne est trop long, la largeur de la colonne devient supérieure à 100px
. Comment pourrais-je désactiver cette expansion ?
J'ai joué un peu avec parce que j'avais du mal à comprendre.
Vous devez définir la largeur des cellules (soit th
ou td
, j'ai défini les deux) ET définir le table-layout
sur fixed
. Pour une raison quelconque, la largeur des cellules ne semble rester fixe que si la largeur de la table est également définie (je pense que c'est stupide mais peu importe).
Il est également utile de mettre la propriété overflow
à hidden
pour empêcher tout texte supplémentaire de sortir du tableau.
Vous devriez vous assurer de laisser toutes les bordures et les tailles pour les CSS, aussi.
Voici donc ce que j'ai :
table {
border: 1px solid black;
table-layout: fixed;
width: 200px;
}
th,
td {
border: 1px solid black;
width: 100px;
overflow: hidden;
}
<table>
<tr>
<th>header 1</th>
<th>header 234567895678657</th>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
</table>
[Le voici dans JSFiddle][1]
Ce type a eu un problème similaire : https://stackoverflow.com/q/446624/534056
[1] :
Vous devez écrire ceci dans le CSS correspondant
table-layout:fixed;