mdn - html center text



Verwenden Sie Text-Align-Center in Colgroup (3)

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

Ich habe eine Tabelle in meiner Seite, ich benutze Colgroups, um alle Zellen in dieser Spalte auf die gleiche Weise zu formatieren, funktioniert gut für die Hintergrundfarbe und alle. aber scheint nicht herauszufinden, warum Text-Align Center nicht funktioniert. Der Text wird nicht zentriert.

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

Siehe ähnliche Frage: Warum ist das Formatieren von Tabellenspalten nicht erlaubt?

Sie dürfen nur Rahmen-, Hintergrund- , Breiten- und Sichtbarkeitseigenschaften festlegen, da Zellen keine direkten Nachkommen von Spalten, sondern nur von Reihen sind.

Es gibt ein paar 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 generieren usw.

Eine andere Lösung für moderne Browser (dh nicht IE6) ist die 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) -Wähler, so dass Sie gezielt auf bestimmte Spalten zugreifen können.

Sie können auch td+td , um ab der zweiten Spalte auszuwählen (es bedeutet eigentlich "alle td Elemente auswählen, die ein td Element auf der linken Seite haben). td+td+td wählt aus der dritten Spalte aus - Sie können auf diese Weise fortfahren , übergeordnete Eigenschaften, aber ehrlich gesagt, es ist kein großartiger Code.


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

Siehe "Das Geheimnis, warum nur vier Eigenschaften für Tabellenspalten gelten" für eine Beschreibung, warum dies der Fall ist.

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

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

Das würde alle Tabellenzellen zentrieren, außer der ersten Spalte. Dies funktioniert nicht in IE6, aber in IE6 arbeitet das text-align tatsächlich (fälschlicherweise) an 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 ein <tr> .





css-tables