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

StackOverflow https://stackoverflow.com/questions/868009

  •  22-08-2019
  •  | 
  •  

Pregunta

Ejemplo:

<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 me las clases de uso/ids en las células directamente, funciona.

Estoy obligado a usar ellos, o hay una manera de tomar ventaja de la <col> etiqueta?

¿Fue útil?

Solución

No se supone que funciona, al menos con CSS 2.1.Usted puede tener una mirada en el CSS 2.1 columnas de la tabla de especificación.

Usted 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;  
}

Otros consejos

Esto funciona para mí en IE con la siguiente DOCTYPE 

<!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 está usando ...

hmm ... acaba de comprobar que no parecen funcionar en Firefox

La respuesta de Alex trabaja para mí, excepto que 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) lugar, sin embargo este selector se introdujo en CSS3.

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

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;
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top