Können Sie die Textausrichtung in HTML-Tabellenspaltengruppen steuern?

Textausrichtung in HTML-Tabellen-Spaltengruppen

Um die Konsistenz innerhalb von Tabellenelementen aufrechtzuerhalten, werden Spaltengruppen häufig verwendet, um alle Zellen innerhalb einer einheitlich zu gestalten angegebene Spalte. Während Colgroups Aspekte wie die Hintergrundfarbe effektiv steuern, bleibt die Textausrichtung durch diese Methode unzugänglich.

Betrachten wir das folgende Beispiel:

<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>

Wie im CSS-Code gezeigt, wird die Zuweisung von „ text-align: center“ in die Klasse „datacol“ führt nicht zu den erwarteten Ergebnissen. Dies liegt daran, dass für Spalten die Anwendbarkeit von CSS-Eigenschaften, mit Ausnahme der Textausrichtung, eingeschränkt ist.

Um dieses Problem zu beheben, können die folgenden CSS-Regeln implementiert werden:

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

Diese Anpassung richtet alle Tabellenzellen zentral aus. mit Ausnahme der ersten Spalte, die linksbündig bleibt. Insbesondere ist diese Problemumgehung nicht mit IE6 kompatibel, wo die Textausrichtung trotz der Inkompatibilität fälschlicherweise auf Spalten angewendet wird.

Außerdem enthält der bereitgestellte HTML-Code eine ungültige Elementstruktur. Der Im Abschnitt fehlt das erforderliche Tag.

Das obige ist der detaillierte Inhalt vonKönnen Sie die Textausrichtung in HTML-Tabellenspaltengruppen steuern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!