wake-up-neo.com

textausrichtung zentrieren in colgroup

ich habe eine Tabelle auf meiner Seite. Ich benutze Colgroups, um alle Zellen in dieser Spalte auf dieselbe Weise zu formatieren. Sie funktioniert gut für die Hintergrundfarbe und alles. scheint jedoch nicht herauszufinden, warum das Textausrichtungszentrum nicht funktioniert. Der Text wird nicht zentriert ausgerichtet.

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

Nur ein begrenzter Satz von CSS-Eigenschaften gilt für Spalten , und text-align gehört nicht dazu.

Siehe "Das Rätsel, warum nur vier Eigenschaften für Tabellenspalten gelten" beschreibt, warum dies der Fall ist.

In Ihrem einfachen Beispiel wäre es am einfachsten, die folgenden Regeln hinzuzufügen:

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

Das würde alle Tabellenzellen außer der ersten Spalte zentrieren. Dies funktioniert nicht in IE6, aber in IE6 funktioniert text-aligndoes tatsächlich (falsch) in der Spalte. Ich weiß nicht, ob IE6 alle Eigenschaften oder nur eine größere Teilmenge unterstützt.

Oh, und dein HTML ist ungültig. <thead> vermisst einen <tr>.

109
mercator

Siehe ähnliche Frage: Warum ist das Stile von Tabellenspalten nicht zulässig?

Sie dürfen nur die Eigenschaften border, background, width und sichtbarkeit festlegen, da Zellen keine direkten Nachkommen von Spalten, sondern nur von Zeilen sind.

Es gibt einige Lösungen. Am einfachsten ist es, jeder Zelle in der Spalte eine Klasse hinzuzufügen. Leider bedeutet das mehr HTML, sollte aber kein Problem sein, wenn Sie Tabellen aus einer Datenbank usw. generieren.

Eine andere Lösung für moderne Browser (d. H. Nicht IE6) besteht in der Verwendung einiger Pseudoklassen. tr > td:first-child wählt die erste Zelle in einer Zeile aus. Opera, Safari, Chrome und Firefox 3.5 unterstützen auch den :nth-child(n)-Selektor, damit Sie bestimmte Spalten anvisieren können.

Sie können auch td+td verwenden, um ab der zweiten Spalte auszuwählen (es bedeutet tatsächlich "Alle td-Elemente auswählen, die links ein td-Element enthalten). td+td+td wählt aus der dritten Spalte - Sie können auf diese Weise fortfahren und die Eigenschaften überschreiben Es ist kein großartiger Code.

25
DisgruntledGoat

Mit dem folgenden CSS können Sie einfach eine oder mehrere Klassen an das Tabellenelement anhängen, um die 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/

4
Fred

Zusätzlich zu den Einschränkungen, die in anderen Antworten erwähnt wurden, funktioniert die Sichtbarkeit: Zusammenbruch aufgrund von Fehlern in Chrome- und Chromium-basierten Browsern ab Februar 2018 immer noch nicht. Weitere Informationen finden Sie unter " CSS-Sichtbarkeit von Spalten: Zusammenbruch funktioniert nicht in Chrome ". Daher glaube ich, dass die derzeit verwendbaren Eigenschaften nur Rahmen, Hintergrund und Breite sind (es sei denn, Sie verwenden eine Art Polyfill für Chrome und andere Chromium-basierte Browser). Der Fehler kann unter https://crbug.com/174167 nachverfolgt werden.

0
Jacob C.