2009-11-16 17 views
13

Me gustaría aplicar un color de fondo a un COLGROUP, pero solo dentro del TBODY de la tabla. Dada una tabla calendario típico con una estructura como la siguiente:selector CSS que aplica un estilo a COLGROUP pero solo dentro de TBODY (no THEAD)?

<table> 
    <colgroup class="weekdays" span="5"/> 
    <colgroup class="weekend" span="2"/> 
    <thead> 
    <tr> 
     <td/><td/><td/><td/><td/> 

     <!-- I'd like the columns of the following two cells to be untouched. --> 
     <td/><td/> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td/><td/><td/><td/><td/> 

     <!-- I'd like selector to apply the style only to the columns of the following two cells --> 
     <td/><td/> 
    </tr> 
    ... 
    </tbody> 
</table> 

¿Hay un selector CSS (o algo similar) que me permite aplicar un estilo diferente a la COLGROUP "fin de semana" en el THEAD y TBODY?

Respuesta

14

Con su HTML de ejemplo tal como está, no creo que haya un solo selector que logre lo que desea. El elemento colgroup es bastante único en lo que respecta al comportamiento de CSS, ya que al establecer el estilo de un colgroup, termina afectando a los elementos que (por reglas de herencia de CSS) no están relacionados con el colgroup. Esto significa que no puede usar un selector como colgroup.weekend tbody, porque tbody no es un elemento secundario del grupo de contactos (o viceversa) y simplemente no hereda de esa manera.

Lo más cerca que podía llegar a alcanzar lo que quiere es la siguiente:

thead td { background-color:white; }
colgroup.weekend { background-color:red; }

thead td es un selector más específico que colgroup.weekend, por lo que terminan 'anular' el color de la colgroup para la cabecera.

+0

Ok, gracias por la información. – Manne

Cuestiones relacionadas