web-dev-qa-db-fra.com

utilisation du centre d'alignement de texte dans colgroup

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;
}
htmlcsshtml-tablecss-tables
65
Sander

Seul un ensemble limité de propriétés CSS s'applique aux colonnes , et text-align n'en fait pas partie.

Voir "Le mystère de savoir pourquoi seules quatre propriétés s'appliquent aux colonnes de table" pour une description de la raison pour laquelle c'est le cas.

Dans votre exemple simple, le moyen le plus simple de résoudre ce problème consiste à ajouter les règles suivantes:

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

Cela centrerait toutes les cellules du tableau, sauf la première colonne. Cela ne fonctionne pas dans IE6, mais dans IE6 le text-alignne fonctionne réellement (à tort) sur la colonne. Je ne sais pas si IE6 prend en charge toutes les propriétés, ou tout simplement un sous-ensemble plus important.

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

109
mercator

Voir la question similaire: Pourquoi les colonnes de style ne sont-elles pas autorisées?

Vous êtes uniquement autorisé à définir les propriétés border, background, width et Visibility, car les cellules ne sont pas des descendants directs de colonnes, mais uniquement de lignes.

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

Une autre solution pour les navigateurs modernes (pas IE6) consiste à utiliser des pseudo classes. tr > td:first-child sélectionnera la première cellule d'une rangée. Opera, Safari, Chrome et Firefox 3.5 prennent également en charge le sélecteur :nth-child(n) afin que vous puissiez cibler des colonnes spécifiques.

Vous pouvez également utiliser td+td pour sélectionner à partir de la deuxième colonne (cela signifie en fait "sélectionner tous les éléments td qui ont un élément td à sa gauche). td+td+td sélectionne dans la troisième colonne - vous pouvez continuer de cette manière en remplaçant les propriétés. , ce n'est pas un bon code.

25
DisgruntledGoat

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/

4
Fred

En plus des limitations mentionnées dans d'autres réponses, à compter de février 2018, la visibilité: L'effondrement ne fonctionne toujours pas sur les colgroups des navigateurs basés sur Chrome et Chromium, en raison d'un bogue. Voir " Visibilité des colonnes CSS: la réduction ne fonctionne pas sous Chrome ". Je pense donc que les propriétés actuellement utilisables ne sont que frontière, fond, largeur (à moins que vous n'utilisiez une sorte de polyfill pour Chrome et les autres navigateurs à base de Chromium). Le bogue peut être suivi à l’adresse https://crbug.com/174167 .

0
Jacob C.