web-dev-qa-db-fra.com

Comment 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 définir la largeur maximale d'une cellule de tableau à l'aide de pourcentages?

htmlcsshtml-table
87
Leo Jiang

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

Si vous souhaitez simplement que la seconde colonne occupe au maximum 67%, vous pouvez définir la largeur (qui est en fait la largeur minimale, pour les cellules de tableau) sur 33%, par exemple. dans l'exemple

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

Régler cela pour les deux colonnes ne fonctionnera pas très bien, car cela a tendance à obliger les navigateurs à donner aux colonnes la même largeur.

64
Jukka K. Korpela

Vieille question que je connais, mais cela est maintenant possible en utilisant la propriété css table-layout: fixed sur la balise de la table. Réponse ci-dessous à partir de cette question largeur de pourcentage CSS et débordement de texte dans une cellule de tablea

Ceci est facilement fait 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/

89
superphonic

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

Placez la table dans son propre div, puis définissez la largeur, la largeur minimale et/ou la largeur maximale de la div comme vous le souhaitez pour l'ensemble de la table. Ensuite, vous pouvez travailler et définir la largeur et la largeur minimale pour les autres cellules, ainsi que la largeur maximale pour la division qui fonctionne efficacement autour et vers l'arrière pour obtenir la largeur maximale souhaitée.

<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 "max" largeur d'une cellule en soi, mais cela permet un 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é dans notre situation où nous souhaitons que la partie de navigation dans la page s’agrandisse et baisse à un point, mais pour tous les grands écrans ces jours-ci.

9
Damon

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>
0
dov.amir