¿Cómo aplicar relleno a una columna usando <col> y CSS en Firefox?

Ejemplo:¿Cómo aplicar relleno a una columna usando <col> y CSS en Firefox?

<style type="text/css"> 
    table { 
     border: 1px solid red; 
     border-collapse: collapse; 
     text-align: left; 
    } 
    #col-1 { 
     padding-left: 20px; 
     background-color: tan; 
    } 
    #specific-cell { 
     padding-left: 20px; 
    } 
</style> 
<table> 
    <col id="col-1"> 
    <col id="col-2"> 
    <tr> 
     <th>foo</th> 
     <th>bar</th> 
    </tr> 
    <tr> 
     <td>data1</th> 
     <td>data2</th> 
    </tr> 
    <tr> 
     <td id="specific-cell">data1</th> 
     <td>data2</th> 
    </tr> 
    <tr> 
     <td>data1</th> 
     <td>data2</th> 
    </tr> 
</table>

El color se aplica a la columna, pero no el relleno. Si utilizo clases/identificadores en las celdas directamente, funciona.

¿Estoy obligado a usarlos, o hay alguna forma de aprovechar la etiqueta <col>?

Fuente

2009-05-15 mark

No se supone que funcione, en al menos con CSS 2.1. Puede echarle un vistazo al CSS 2.1 table columns specification.

Puede evitar esto mediante el uso de :first-child y +:

/* first column */ 
td:first-child { 
    padding-left: 20px; 
} 

/* second column */ 
td:first-child + td { 
    padding-left: 10px; 
} 

/* third columns */ { 
td:first-child + td + td { 
    padding-left: 0; 
}

Fuente

2009-05-15 11:55:51 amain

¡Respuesta muy perspicaz, gracias! – mark

Esto funciona para mí en IE con el DOCTYPE siguiente

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

y los estilos

#col-1 { 
    padding-left: 50px; 
    background-color: tan; 
} 
#col-2 { 
    padding-left: 100px; 
    background-color: lightgreen; 
}

Qué tipo de documento está usando ... y qué navegador utilizas ...

hmm ... simplemente comprobado no parece funcionar en Firefox

Fuente

2009-05-15 10:58:43

Cómo inútil sin la información del navegador, estoy lo siento. Sí, es FF, lo agregué a la pregunta. – mark

la respuesta de Alex que funciona para mí, si no es muy escalable para una gran cantidad de columnas y rápidamente se vuelve difícil de leer. Terminé usando :nth-of-type(n), sin embargo, este selector se introdujo en CSS3.

Selector: :nth-of-type(n)
Ejemplo: p:nth-of-type(2)
Resultado: Selecciona todos los elementos <p> que es el segundo elemento <p> de su padre

Ejemplo:

/*column 1*/ 
#myTable td:nth-of-type(1) 
{ 
    padding-left: 20px; 
    background-color: tan; 
} 
/*column 2*/ 
#myTable td:nth-of-type(2) 
{ 
    padding-left: 10px; 
}

Fuente

2013-11-12 20:17:26 johntrepreneur

¿Cómo aplicar relleno a una columna usando <col> y CSS en Firefox?

Respuesta

Cuestiones relacionadas