Pouvez-vous contrôler l'alignement du texte dans les groupes de tableaux HTML ?

Alignement du texte dans les colgroups de tableaux HTML

Afin de maintenir la cohérence au sein des éléments du tableau, les colgroups sont fréquemment utilisés pour styliser uniformément toutes les cellules d'un colonne spécifiée. Bien que les colgroups contrôlent efficacement des aspects tels que la couleur d'arrière-plan, l'alignement du texte reste inaccessible via cette méthode.

Considérons l'exemple suivant :

<code class="html"><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></code>

<code class="css">#names {
    width: 200px;
}

#myTable .datacol {
    text-align: center;
    background-color: red;
}</code>

Comme démontré dans le code CSS, l'attribution de " text-align: center" à la classe "datacol" ne donne pas les résultats attendus. En effet, les colonnes ont une applicabilité limitée des propriétés CSS, à l'exclusion de l'alignement du texte.

Pour résoudre ce problème, les règles CSS suivantes peuvent être implémentées :

<code class="css">#myTable tbody td { text-align: center }
#myTable tbody td:first-child { text-align: left }</code>

Cet ajustement aligne toutes les cellules du tableau de manière centrale, à l'exception de la première colonne, qui reste alignée à gauche. Notamment, cette solution de contournement n'est pas compatible avec IE6, où l'alignement du texte s'applique par erreur aux colonnes malgré son incompatibilité.

De plus, le code HTML fourni contient une structure d'éléments non valide. Le Il manque la section étiquette.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!