à l'aide de text-align center à colgroup
j'ai une table dans ma page, j'utilise colgroups pour le format de toutes les cellules de cette colonne de la même façon, les bonnes œuvres pour la couleur d'arrière-plan et tout et tout. mais n'arrive pas à comprendre pourquoi text-align center ne fonctionne pas. il n'a pas d'aligner le texte centré.
exemple:
<table id="myTable" cellspacing="5">
<colgroup id="names"></colgroup>
<colgroup id="col20" class="datacol"></colgroup>
<colgroup id="col19" class="datacol"></colgroup>
<colgroup id="col18" class="datacol"></colgroup>
<thead>
<th> </th>
<th>20</th>
<th>19</th>
<th>18</th>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
CSS:
#names {
width: 200px;
}
#myTable .datacol {
text-align: center;
background-color: red;
}
Vous devez vous connecter pour publier un commentaire.
Seulement un ensemble limité de propriétés CSS s'applique à des colonnes, et
text-align
n'est pas l'un d'eux.Voir "Le mystère de pourquoi seulement quatre propriétés s'appliquent à des colonnes de la table" pour une description de la raison c'est le cas.
Dans votre exemple simple, le plus simple moyen pour résoudre ce problème serait d'ajouter ces règles:
Qui serait le centre de toutes les cellules d'un tableau, à l'exception de la première colonne. Cela ne fonctionne pas avec IE6, mais dans IE6, le
text-align
ne en fait (à tort) le travail sur la colonne. Je ne sais pas si IE6 prend en charge toutes les propriétés, ou tout simplement un plus grand sous-ensemble.Oh, et votre code HTML n'est pas valide.
<thead>
manque une<tr>
.th
dans lethead
, donc je l'ai supprimé de mes suggestions. Il est parfaitement valide, et peut être approprié d'avoir unth
dans letbody
ou untd
dans lethead
, cependant. E. g. une colonne d'en-tête ne peut pas aller dans lethead
, et les descriptions des en-têtes pourraient aller danstd
s dans lethead
. Mais ce n'est probablement le cas ici.text-align
sur lecol
/colgroup
de toute façon).Voir question similaire: Pourquoi le style des colonnes de la table pas permis?
Vous êtes seulement autorisé à définir frontière, fond, largeur et visibilité propriétés, en raison du fait que les cellules ne sont pas des descendants directs de colonnes que de lignes.
Il y a peu de solutions. Le plus simple est d'ajouter une classe pour chaque cellule de la colonne. Malheureusement, cela signifie que plus de HTML, mais ne devrait pas l'abeille un problème si vous êtes à créer des tables d'une base de données etc.
Une autre solution pour les navigateurs modernes (c'est à dire pas IE6) est l'utilisation de pseudo-classes.
tr > td:first-child
permettra de sélectionner la première cellule d'une ligne. Opera, Safari, Chrome et Firefox 3.5 est également l'appui de la:nth-child(n)
sélecteur de sorte que vous pouvez cibler des colonnes spécifiques.Vous pouvez également utiliser
td+td
pour sélectionner à partir de la deuxième colonne à partir de (cela signifie en fait "sélectionner tous lestd
éléments qui ont untd
élément à sa gauche).td+td+td
sélectionne à partir de la troisième colonne, vous pouvez continuer de cette manière, en remplaçant les propriétés. Honnêtement, même si, ce n'est pas grand code.Avec le code CSS suivant, vous pouvez simplement ajouter une ou plusieurs classes à l'élément de la table afin d'aligner ses colonnes en conséquence.
CSS
HTML
Exemple: http://jsfiddle.net/HHZsw/
CSS3
sélecteurs, et utilisable dans IE9 et plus. Si vous avez besoin de support pour les versions antérieures d'internet explorer, vous ne pouvez pas utiliser cette méthode.Outre les limitations mentionnées dans d'autres réponses, en février 2018, la visibilité:l'effondrement ne fonctionne toujours pas sur colgroups dans Chrome et de Chrome et les navigateurs web, en raison d'un bug. Voir "CSS col de la visibilité:l'effondrement ne fonctionne pas sur Chrome". Je crois donc actuellement utilisable propriétés sont juste à la frontière, le fond, la largeur (à moins d'utiliser une sorte de polyfill de Chrome de Chrome et d'autres navigateurs). Le bug peut être suivi à https://crbug.com/174167 .