unter Verwendung von Text-align Zentrum in colgroup

Question

i in meiner Seite eine Tabelle, i colgroups verwenden, um alle Zellen in dieser Spalte funktioniert auf die gleiche Art und Weise zu formatieren, gut für die Hintergrundfarbe und alle. aber kann nicht scheinen, um herauszufinden, warum text-align Zentrum funktioniert nicht. es nicht richten Sie den Text zentriert ist.

Beispiel:

<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

Nur eine begrenzte Anzahl von CSS-Eigenschaften gilt für Spalten und text-align ist nicht einer von ihnen.

Siehe „Das Geheimnis, warum nur vier Eigenschaften auf Tabellenspalten anwenden“ eine Beschreibung, warum dies der Fall ist.

In Ihrem einfachen Beispiel ist der einfachste Weg, es zu beheben wäre, diese Regeln hinzuzufügen:

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

Das würde alle Tabellenzellen Zentrum, mit Ausnahme der ersten Spalte. Das funktioniert nicht in IE6, aber in IE6 die text-align hat wirklich (zu Unrecht) die Arbeit an der Säule. Ich weiß nicht, ob IE6 alle Eigenschaften unterstützt, oder einfach nur eine größere Teilmenge.

Oh, und Ihre HTML ist ungültig. <thead> verpasst eine <tr>.

Answer 2

ähnliche Frage Siehe: Warum Styling Tabellenspalten sind nicht erlaubt

Sie sind nur auf Grenze erlaubt , Hintergrund , Breite und Sichtbarkeit Eigenschaften, aufgrund der Tatsache, dass Zellen nicht direkt Abkömmlinge von Spalten, nur von Zeilen.

Es gibt ein paar Lösungen. Am einfachsten ist es, eine Klasse zu jeder Zelle in der Spalte hinzuzufügen. Leider bedeutet, dass mehr HTML sollte aber kein Problem Biene, wenn Sie Tabellen aus einer Datenbank sind Erzeugung etc.

Eine andere Lösung für moderne Browser (das heißt nicht IE6) ist es, einige Pseudo-Klassen zu verwenden. tr > td:first-child wird die erste Zelle in einer Zeile auszuwählen. Opera, Safari, Chrome und Firefox 3.5 auch die :nth-child(n) Wähler unterstützen, so dass Sie bestimmte Spalten ausrichten können.

Sie auch td+td aus der zweiten Spalte ab auszuwählen nutzen könnten (es bedeutet eigentlich „alle td Elemente auswählen, die ein td Element auf seinen linken hat) td+td+td aus der dritten Spalte wählt -. Sie auf diese Weise fortgesetzt werden können, zwingende Eigenschaften Ehrlich aber., es ist nicht so toll Code.

Answer 3

Mit dem folgende CSS, können Sie einfach fügen Sie eine oder mehr Klassen an dem das Tabellenelement, um ihre Spalten entsprechend auszurichten.

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>

Beispiel: http://jsfiddle.net/HHZsw/

Answer 4

Zusätzlich zu den Einschränkungen in anderen Antworten erwähnt, ab Februar 2018 Sichtbarkeit: Zusammenbruch noch nicht funktioniert auf colgroups in Chrome und Chromium-basierten Browsern, aufgrund eines Fehler. Siehe „ CSS col Sichtbarkeit: Zusammenbruch nicht auf Chrome funktioniert “. Deshalb glaube ich, dass die derzeit nutzbaren Eigenschaften sind nur Grenze, Hintergrund, Breite (es sei denn, Sie irgendeine Art von polyfill für Chrome verwenden und andere Chrom-basierten Browser). Der Fehler kann unter https://crbug.com/174167 verfolgt werden.