Dificultades con la aplicación de "nth-of-child" a las celdas de la tabla

Question

Apr 27, 2012, 12:14 AM

Dificultades con la aplicación de "nth-of-child" a las celdas de la tabla

Estoy tratando de aplicar el estilo nth-of-child a las celdas de la tabla, pero eso no funciona. De acuerdo con mi código, me gustaría que cada contenido de la segunda celda esté alineado a la derecha y tenga un color gris. Pero ese estilo no tiene ningún efecto.

Aquí está el código:

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

He probado diferentes tipos de especificación que tipo de objeto modificar: "td", "tr td", "table tbody tr td" nada afecta a mi tabla

También traté de usar la ID para identificar la tabla y aplicar el estilo a la identificación, eso tampoco ayuda.

PD He probado en IE9, Chrome, FF