Trudności z zastosowaniem „nth-of-child” do tabeli komórek

Question

Apr 27, 2012, 12:14 AM

Trudności z zastosowaniem „nth-of-child” do tabeli komórek

Próbuję zastosować styl n-tego-dziecka do tabeli komórek, ale to nie działa. Zgodnie z moim kodem chciałbym, aby każda druga komórka była wyrównana do prawej i miała szary kolor. Ale ten styl nie ma żadnego efektu.

Oto kod:

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

Próbowałem innego rodzaju specyfikacji, który typ obiektu należy zmodyfikować: „td”, „tr td”, „table tbody tr td” nic nie wpływa na moją tabelę.

Próbowałem również użyć ID do identyfikacji tabeli i zastosowania stylu do id - to również nie pomaga.

P.S. Przetestowałem w IE9, Chrome, FF