en utilisant le centre-align texte dans colgroup

Question

J'ai une table dans ma page, j'utilise colgroups pour formater toutes les cellules dans cette colonne de la même façon, fonctionne bien pour la couleur de fond et tout. mais il ne peut pas à comprendre pourquoi le centre text-align ne fonctionne pas. il ne correspond pas au 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

un ensemble limité de propriétés CSS applique aux colonnes et text-align n'est pas un d'entre eux.

Voir « Le mystère de la raison pour laquelle seulement quatre propriétés applicables aux colonnes de table » une description des raisons pour lesquelles cela est le cas.

Dans votre exemple simple, la meilleure façon de le fixer serait d'ajouter ces règles:

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

Ce centrerait toutes les cellules de table, à l'exception de la première colonne. Cela ne fonctionne pas dans IE6, mais dans IE6 la text-align fait 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 sous-ensemble plus grand.

Oh, et votre code HTML est invalide. <thead> manque un <tr>.

Answer 2

Voir la même question: Pourquoi les colonnes de table de style non autorisés

Vous ne sont autorisés à mettre frontière , fond , largeur et visibilité propriétés, en raison du fait que les cellules ne sont pas descendants directs de colonnes, que de lignes.

Il y a quelques solutions. Le plus simple est d'ajouter une classe à chaque cellule dans la colonne. Malheureusement, cela signifie plus HTML, mais ne devrait pas abeille un problème si vous générez des tables de base de données, etc.

Une autre solution pour les navigateurs modernes (à savoir pas IE6) est d'utiliser certaines classes pseudo. tr > td:first-child sélectionne la première cellule dans une rangée. Opera, Safari, Chrome et Firefox 3.5 prennent également en charge le sélecteur de :nth-child(n) 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 en avant (cela signifie en fait « sélectionner tous les éléments td qui ont un élément de td à sa gauche) td+td+td sélectionne à partir de la troisième colonne -. Vous pouvez continuer de cette façon, les propriétés impérieuses . Honnêtement, ce n'est pas grand code.

Answer 3

Avec le CSS suivant, vous pouvez simplement ajouter une ou plusieurs classes au l'élément de 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/

Answer 4

En plus des limitations mentionnées dans d'autres réponses, à partir de Février 2018, la visibilité: l'effondrement ne fonctionne toujours pas sur colgroups dans les navigateurs basés sur Chrome et Chrome, en raison d'un bogue. Voir « CSS visibilité col: l'effondrement ne fonctionne pas sur Chrome ». Je crois les propriétés actuellement utilisables sont juste frontière, arrière-plan, la largeur (à moins que vous employez une sorte de polyfill pour Chrome et d'autres navigateurs à base de chrome). Le bug peut être suivi à https://crbug.com/174167 .