« Bug IE : margin et float  
  Pour imprimer une page HTML »

Gérer les bordures d’un tableau

En HTML, facile ! On mettait un border=1 avec un bordercolor et hop ! Le tableau avait un quadrillage à peu près digne de ce nom. Mais en CSS, ce n’est plus aussi simple.


Sans l’astuce

Voici l’aspect du tableau :

Entete 1 Entete 2 Entete 3
Ligne 1 Ligne 1 Ligne 1
Ligne 2 Ligne 2 Ligne 2
Ligne 3 Ligne 3 Ligne 3

Le code CSS associé est le suivant :


.tableau1 {
border: 1px solid #000; /* contour du tableau */
}
.tableau1 td, .tableau1 th {
border: 1px solid fuchsia; /* contour de chaque cellule */
}

Avec l’astuce

On élimine l’espace entre les bordures des cellules grâce à la propriété border-collapse : collapse appliquée à la balise table.

Ce qui donne ceci :

Entete 1 Entete 2 Entete 3
Ligne 1 Ligne 1 Ligne 1
Ligne 2 Ligne 2 Ligne 2
Ligne 3 Ligne 3 Ligne 3

Le code CSS associé est le suivant


.tableau2 {
border: 1px solid #000; /* contour du tableau */
border-collapse: collapse;
}
.tableau2 td, .tableau2 th {
border: 1px solid lime; /* contour de chaque cellule */
}

> Merci à Openweb pour cette astuce

août 8th, 2006 | Category: CSS, Trucs et astuces

Comments are closed.