Comment puis-je définir la largeur maximale d'une cellule de tableau à l'aide de pourcentages?

<table>
<tr>
<td>Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
td{max-width:67%;}
</style>

Ce qui précède ne fonctionne pas. Comment puis-je définir la largeur maximale d'une cellule de tableau à l'aide de pourcentages?

Selon la définition de max-width dans la spécification CSS 2.1, «l'effet de 'min-width' et 'max-width' sur les tableaux, les tableaux en ligne, les cellules de tableau, les colonnes de tableau et les groupes de colonnes n'est pas défini.» Vous ne pouvez donc pas définir directement max-width sur un élément td.

Si vous voulez juste que la deuxième colonne occupe au plus 67%, vous pouvez définir la largeur (qui est en fait la largeur minimale, pour les cellules du tableau) à 33%, par exemple dans le cas de l'exemple

td:first-child { width: 33% ;}

Définir cela pour les deux colonnes ne fonctionnera pas très bien, car cela tend à faire en sorte que les navigateurs donnent aux colonnes une largeur égale.

Ancienne question que je connais, mais cela est maintenant possible en utilisant la propriété css table-layout: fixedsur la balise table. Réponse ci-dessous à cette question Largeur en pourcentage CSS et dépassement de texte dans une cellule de tableau

Cela se fait facilement en utilisant table-layout: fixed, mais un peu délicat car peu de gens connaissent cette propriété CSS.

table {
  width: 100%;
  table-layout: fixed;
}

Voyez-le en action sur le violon mis à jour ici: http://jsfiddle.net/Fm5bM/4/

Je sais que c'est littéralement un an plus tard, mais j'ai pensé que je partagerais. J'essayais de faire la même chose et suis tombé sur cette solution qui a fonctionné pour moi. Nous avons défini une largeur maximale pour l'ensemble du tableau, puis travaillé avec les tailles de cellule pour obtenir l'effet souhaité.

Placez le tableau dans son propre div, puis définissez la largeur, la largeur minimale et / ou la largeur maximale du div comme vous le souhaitez pour l'ensemble du tableau. Ensuite, vous pouvez travailler et définir la largeur et les largeurs min pour les autres cellules, et la largeur maximale pour le div en travaillant efficacement autour et en arrière pour atteindre la largeur maximale que nous voulions.

<div id="tablediv">
<table width="100%">
 <tr>
  <td class="tdleft">Test</td>
  <td>A long string blah blah blah</td>
 </tr>
</table>
</div>

Ensuite, dans vos styles, mettez:

#tablediv {
    width:90%;
    min-width:800px
    max-width:1500px;
}
.tdleft {
    width:20%;
    min-width:200px;
}

Certes, cela ne vous donne pas une largeur "max" d'une cellule en soi, mais cela permet un certain contrôle qui pourrait fonctionner à la place d'une telle option. Je ne sais pas si cela fonctionnera pour vos besoins. Je sais que cela a fonctionné pour notre situation où nous voulons que le côté navigation de la page augmente et diminue jusqu'à un certain point, mais pour tous les écrans larges de nos jours.

le pourcentage doit être relatif à une taille absolue, essayez ceci:

<table>
<tr>
<td>Testasdas 3123 1 dasd as da</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
table{width:200px;}
td{width:65%;border:1px solid black;}
</style>