CSS colonnes de la Table largeur: fixe - dynamique(30%) - dynamique(70%) - fixe
J'ai réussi à obtenir ce type de disposition de table:
fixe dynamique(50%) - dynamique(50%) - fixe
http://jsfiddle.net/ihtus/ksucU/
Mais comment puis-je obtenir ce genre? fixe - dynamique(30%) - dynamique(70%) - fixe
Voici mon CSS:
table {
width:100%;
border-collapse:collapse;
table-layout:fixed;
}
td {
border: 1px solid #333;
}
OriginalL'auteur ihtus | 2012-09-28
Vous devez vous connecter pour publier un commentaire.
Comme ceci:
http://jsfiddle.net/7dSpr/
mais pourquoi si vous n'utilisez pas "table-layout:fixed;" => tout se casse?
C'est parce que
table-layout
est réglée par défaut àauto
ce qui signifie qu'il sera aussi large que la plus large incassable contenu dans les cellules.fixed
tiendrons compte de vos paramètres de largeur dans le css. Notez que tout ne se casse, le pourcentage des largeurs au milieu de deux colonnes continuera à être 30% et 70%.continuera à être 30% et 70% à partir de quelle largeur? total de la largeur de la table? pas de "w" largeur?
30% et 70% de ce que jamais est à gauche après les deux
td
éléments sur la gauche et la droite ont élargi pour s'adapter à la non-sécable contenu à l'intérieur d'eux. Au total, le tableau sera de 100% de la page, y compris les marges par défaut et le rembourrage.OriginalL'auteur Mr. Mr.
L'approche générale est la même que celle Monkieboy utilisé, mais vous devriez éviter de styles en ligne. ( j'entends par là que l'écriture
style="someting"
) dans votre fichier html. Vous devez utiliser les classes et les CSS à la place.D'abord donner la td une catégorie comme ce
<td class="thin-column">text here</td>
,ensuite dans ton CSS à utiliser pour appliquer les styles:
.thin-column:{ width: 30% }
OriginalL'auteur Richard Otvos