De toute façon à synchroniser la table des largeurs de colonne avec HTML + CSS?
J'ai un certain nombre de tables avec les mêmes colonnes, et il serait beaucoup plus agréable si ils ont partagé la même largeur d'une colonne. Est une chose possible? Les mettre dans le même tableau avec des lignes avec pas de frontières entre eux n'est pas une option.
Edit: Ouais je suis au courant que je puisse corriger les largeurs de moi-même mais je m'attendais à quelque chose qui ferait le lien dans le navigateur de la largeur de la colonne de l'algorithme, mais simplement attachés deux tables ou plus ensemble pour le but de faire cette mise en page.
Je ne pense pas qu'une telle chose était possible, mais j'ai pensé que je voudrais vérifier au cas où.
Vous devez vous connecter pour publier un commentaire.
Il est seulement possible si vous pouvez fixer la largeur des colonnes. Si vous pouvez définir une largeur fixe alors un peu de css comme ceci devrait fonctionner:
Vous pouvez personnaliser chaque largeur des colonnes comme ceci:
et puis spécifier les largeurs comme ceci:
Si vous n'êtes pas trop pointilleux sur qui les largeurs des colonnes, le navigateur est livré avec, tant qu'ils sont les mêmes dans les différentes tables, vous pouvez utiliser le CSS
table-layout
propriété (pris en charge par tous les principaux navigateurs) en combinaison avec une largeur de table:Cela provoque toutes les colonnes (sans préciser la largeur) de la même largeur, quel que soit le contenu de la table.
table-layout: fixed
ainsi que de définir des largeurs fixes sur certaines colonnes/cellules.Voici un petit code JavaScript que j'ai fait pour redimensionner les cellules pour les rendre largeur égale dans tous les tableaux sur une page.
De s'étendre sur les Ken de réponse, vous pouvez également spécifier avec précision les largeurs en pixels:
ou ems (la largeur de la lettre m):
ou ex ou pt ou que ce soit (bien...en fait %, pt, px, em, ex, peut-être cela). Si vous avez besoin de votre colonnes de largeurs différentes, alors le plus simple est de donner les cellules de la table des classes:
et attribuer les largeurs de colonne pour les classes:
Il devrait être suffisant pour attribuer les largeurs de colonne de la première ligne de chaque table. [edit: regarde comme je l'ai été creusé sur que pendant que j'écrivais]
Vous pourrait également devenir fou avec le CSS 2 sélecteur de frères, et d'écrire quelque chose comme
mais si vous avez plus de quelques colonnes, qui pourrait devenir laid. Et si vous êtes en utilisant une sorte de système de template ou un script pour générer ces tableaux, je suis sûr que ça va être plus facile/plus de clarté, il suffit de mettre la class="col#" attribut sur chaque cellule de votre modèle une fois.
Je suis presque choqué que personne n'a suggéré les groupes de colonnes! Avec elle, vous pouvez donner à une colonne d'une classe spécifique, la largeur, et les autres propriétés. Et puisque c'est du HTML 4.01 il est pris en charge par tous les navigateurs qui prennent en charge le doctype.
Luis Siquot réponse est celle que j'ai utilisé. Cependant, au lieu d'utiliser clientWidth, vous devez utiliser jquery largeur() la fonction de normaliser les largeurs entre les navigateurs, et de ne pas calculer de rembourrage. À l'aide de clientWidth entraînerait dans les cellules de la table de l'expansion sur ajaxpostbacks en raison du rembourrage (si rembourrage utilisé dans le TD).
Ainsi, le code est correct à l'aide de Luis Siquot réponse serait de remplacer
avec
La façon la plus simple est une sorte de "sale", mais il fonctionne le mieux.
Il fait exactement ce qu'il faut:
Juste de fusionner vos deux tables dans une table.
Dans mon cas, la seule chose entre les deux tables est un
h3
Donc mon tableau
est devenu ceci:
de cette façon, votre table sera "sync" il est de la taille vers le haut.
bien sûr, cela ne fonctionne que lorsqu'il n'y a pas trop de complexe de substance entre les deux tables, mais je devine que dans la plupart des cas, il n'est pas. s'il l'était, la synchronisation ne serait pas nécessaire en premier lieu.
chaque paire de tables de redimensionner ses colonnes à la même largeur
semblable à Ole J. Helgesen mais avec jquery et un paramètre pour sélectionner les tables d'égaliser.
(Je ne peux pas voter, mais c'est essentiellement votre solution)
et utiliser ce sctipt