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