utilisation du centre d'alignement de texte dans colgroup

Question

J'ai un tableau dans ma page, j'utilise colgroups pour formater toutes les cellules de cette colonne de la même manière, fonctionne bien pour la couleur d'arrière-plan et tout. mais n'arrive pas à comprendre pourquoi le centre d'alignement de texte ne fonctionne pas. il n'aligne pas 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>&nbsp;</th>
			<th>20</th>
			<th>19</th>
			<th>18</th>
		</thead>
		<tbody>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
		</tbody>
	</table>
 

CSS:

 #names {
    width: 200px;
}

#myTable .datacol {
    text-align: center;
    background-color: red;
}
 

Answer 1

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:

#myTable tbody td { text-align: center }
#myTable tbody td:first-child { text-align: left }

Que 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 l' text-align n' 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>.

Answer 2

Voir la même question: Pourquoi le style des colonnes de la table?

Vous n'êtes autorisé à définir la frontière, à l' arrière-plan, la largeur et la visibilité des propriétés, en raison du fait que les cellules ne sont pas des descendants directs de colonnes que de lignes.

Il existe quelques 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 sera sélectionnez la première cellule d'une ligne. Opera, Safari, Chrome et Firefox 3.5 également en charge l' :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 (il signifie en réalité "tout sélectionner td des éléments qui ont un td é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.

Answer 3

Avec les CSS suivantes, vous pouvez simplement ajouter une ou plusieurs classes à l’élément table afin d’aligner ses colonnes en conséquence.

CSS

 .col1-right td:nth-child(1) {text-align: right}
.col2-right td:nth-child(2) {text-align: right}
.col3-right td:nth-child(3) {text-align: right}
 

HTML

 <table class="col2-right col3-right">
  <tr>
    <td>Column 1 will be left</td>
    <td>Column 2 will be right</td>
    <td>Column 2 will be right</td>
  </tr>
</table>
 

Exemple: http://jsfiddle.net/HHZsw/