Comment puis-je mettre le max de la largeur 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>
Le ci-dessus ne fonctionne pas. Comment puis-je mettre le max de la largeur d'une cellule de tableau à l'aide de pourcentages?
- Veuillez élargir "ne fonctionne pas".
- Vous devez vous assurer que le PARENT de votre banque td a une largeur spécifique (que ce soit que vous passez width: 100%; tout le chemin à partir du corps de votre td, ou vous pourriez donner le parent (ici: tr) 1000px ou ce que vous préférez. Lors de l'utilisation de %% en css il utilise toujours l'exacte px défini dans le père et le transforme l'px en %% pour les enfants, car ils ont une taille par rapport à leur parent.
Vous devez vous connecter pour publier un commentaire.
Selon la définition de max-width dans le CSS 2.1 spec, “l'effet de 'min-width' et 'max-width' sur les tables en ligne de tableaux, cellules de tableau, les colonnes de la table, et les groupes de colonnes n'est pas défini.” Si vous ne pouvez pas définir directement max-width sur un td élément.
Si vous voulez juste la deuxième colonne de prendre jusqu'à plus de 67%, alors vous pouvez définir la largeur (qui est en effet la largeur minimum, pour les cellules de tableau) à 33%, par exemple dans le cas de l'exemple
Paramètre pour les deux colonnes ne fonctionne pas bien, car il a tendance à rendre les navigateurs donner les colonnes de largeur égale.
Vieille question je sais, mais c'est désormais possible à l'aide de la propriété css
table-layout: fixed
sur la balise table. Réponse ci-dessous à partir de cette question CSS pourcentage de la largeur et de text-overflow dans une cellule de tableauCeci se fait facilement en utilisant
table-layout: fixed
, mais un peu difficile parce que pas beaucoup de gens savent à propos de cette propriété CSS.Le voir en action lors de la mise à jour de violon ici: http://jsfiddle.net/Fm5bM/4/
text-overflow: ellipsis;
et peut également ajouter une barre de défilement. CSS-Tricks comme un grand écrire: css-tricks.com/fixing-tables-long-stringsmax-width
de travail. Avoir un 100% de la largeur de la table signifie qu'il sera quelle que soit la taille du conteneur, et la cellule sera toujours à plus de 67% de celui-ci. La table est également sensible qui est un plus. Pas sûr de savoir comment cette solution ne serait pas vous aider.width
propriété de la table, juste lewidth
sur letd
s.max-width
ne fonctionne plus dans ce cas.An incredibly long name for a product intended for testing
est encore de 60% de la table.max-width
dans ce jsfiddle, la largeur restera le même si ce n'est pas lemax-width
qu'il définit. Il pourrait être plus claire, si vous la remplacez par unemax-width: 10%
pour la premièretd
... vous allez voir qu'il ne change pas. jsfiddle.net/w3f8ey22/1Je sais que c'est littéralement un an plus tard, mais j'ai pensé que je pourrais partager avec vous. J'ai essayé de faire la même chose et suis tombé sur cette solution qui a fonctionné pour moi. Nous avons mis une largeur maximale pour l'ensemble de la table, puis il a travaillé avec les tailles de cellule pour l'effet désiré.
Mettre la table dans son propre div, puis définissez la largeur, min-width et/ou max-largeur de la div comme vous le souhaitez pour l'ensemble de la table. Ensuite, vous pouvez travailler et définir width et min-largeur d'autres cellules, et max de la largeur de la div effectivement de travailler autour et vers l'arrière pour atteindre la largeur maximale est de nous voulions.
Ensuite dans vos styles de vente:
Certes, cela ne vous donne pas un "max" de la largeur d'une cellule en soi, mais il permet un certain contrôle qui pourrait fonctionner en lieu et place d'une telle option. Vous ne savez pas si il va travailler pour vos besoins. Je sais qu'il a travaillé pour notre situation où nous voulons que le côté de navigation dans la page d'agrandir et de réduire à un point, mais pour tous les écrans larges de ces jours.
le pourcentage doit être relatif à une taille absolue,
essayez ceci :