Tècnica dels separadors

Publicat el 16/03/2006

Objectiu:

Mostrar un separador gràfic entre cel·les de capçalera d'una taula mitjançant CSS sense afegir codi extra a l'XHTML.

Figura 1. Il·lustra la capçalera d'una taula amb el separador gràfic

Procediment:

Donada una taula tal com:


<table>
<thead>
   <tr>
      <th>capçalera 1,1</th>
      <th>capçalera 1,2</th>
      <th>capçalera 1,3</th>
   </tr>
</thead>
<tbody>
   <tr>
      <td>cel·la 1,1</td>
      <td>cel·la 1,2</td>
      <td>cel·la 1,3</td>
   </tr>
   <tr>
      <td>cel·la 2,1</td>
      <td>cel·la 2,2</td>
      <td>cel·la 2,3</td>
   </tr>
</tbody>
</table>

Caldrà generar una caixa abans de cada th amb la imatge que servirà de separador:


thead th:before {
   display: block;
   content: "";
   background: url(../imatges/separador.png) repeat-y;
   height: 1.2em;
   width: 0.3em;
}

En cas de que sigui possible és interessant donar el height i el width en em per tal de que mantingui les proporcions al modificar el tamany de la lletra del navegador.

Afegint un margin-bottom igual al valor negatiu del height del separador i un margin-left igual al valor negatiu del padding-left + border-left de la cel·la de capçalera:


thead th:before {
   display: block;
   content: "";
   background: url(../imatges/separador.png) repeat-y;
   height: 1.2em;
   width: 0.3em;
   margin: 0 0 -1.2em -0.7em;
}

Per eliminar el separador de la primera cel·la de capçalera només caldrà fer un:


thead th:first-child:before {
   background: none;
}

Solució complementaria per l'Internet Explorer

Com que l'Internet Explorer 6 o inferior no implementa les caixes generades es pot optar per generar-les amb un CSS complementari:


thead th {
   position: relative;
   background-color: expression(this.runtimeStyle.backgroundColor ="transparent", this.innerHTML += '<span class="separadorSetmana"></span>');
}

i crear el separador:


thead th .separadorSetmana {
   position: absolute;
   top: 2px;
   left: 0;
   z-index: 50;
   width: 0.3em;
   height: 1.2em;
   background: url(../imatges/separador.png) no-repeat 100% 0;
}

En aquest cas el separador es pot posicionar més comodament amb una posició absoluta sempre que s'hagi determinat els th com a position: relative

Per eliminar el separador de la primera cel·la caldrà afegir una classe al th, per exemple class="buit", i afegir la regla:


thead .buit .separadorSetmana {
   background: none;
}

Aquesta tècnica té el següent suport:

Suport dels navegadors
Navegador	Windows	Mac	Linux
Si ho proveu en algun navegador que no estigui aquí llistat us agrairia que m'informessiu del resultat
Firefox 1.0.7 +	Sí	Sí	Sí
Opera 8.5 +	Sí	Sí	Sí
Safari 2.0 +	-	Sí	-
Camino 1.0 +	-	Sí	-
OmniWeb 5.1	-	Sí	-
Konqueror 3.4 +	-	-	Sí
Internet Explorer 7	Sí	-	-
Internet Explorer 6	Sí	-	-
Internet Explorer:mac 5.2	-	No	-

Podeu veure l'exemple funcionant o descaregar els arxius comprimits en zip

esbudellant estàndards

Menú