Schwierigkeiten bei der Anwendung des "n-ten Kindes" auf Tabellenzellen

Question

Apr 27, 2012, 12:14 AM

Schwierigkeiten bei der Anwendung des "n-ten Kindes" auf Tabellenzellen

Ich versuche, n-of-child-Stil auf Tabellenzellen anzuwenden, aber das funktioniert nicht. Nach meinem Code möchte ich, dass jeder 2. Zelleninhalt rechtsbündig und grau ist. Aber dieser Stil hat keine Wirkung.

Hier ist der Code:

<code><!DOCTYPE html>
<html>
<head><title>test table centerring</title></head>
<body>
<style type="text/css">
    td:nth-of-child(2) {
        text-align: right;
        color: #ccc;
    }
</style>

<table border="1">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Value</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Name 1</td>
            <td>Value 1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Name 2, Name 2, Name 2, Name 2</td>
            <td>Value 2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Name 3</td>
            <td>Value 3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Name 4</td>
            <td>Value 4, Value 4, Value 4, Value 4</td>
        </tr>
    </tbody>
</table>        
</body></html>
</code>

Ich habe verschiedene Arten von Spezifikationen ausprobiert, um welchen Objekttyp es sich handelt: "td", "tr td", "table tbody tr td". Meine Tabelle ist davon nicht betroffen.

Ich habe auch versucht, ID zu verwenden, um die Tabelle zu identifizieren und Stil auf ID anzuwenden - das hilft auch nicht.

P.S. Ich habe in IE9, Chrome, FF getestet