Tableau css bordures
table {border-collapse:separate;}
permet de fixer des espaces entre les cellules par border-spacing:10px 20px;
et permet de ne pas afficher les cellules vides par empty-cells:hide;
mais ne permet pas d'afficher les bordures de <col> <thead> <tfoot> <tr>
C'est l'inverse pour table {border-collapse:collapse;}
qui permet d'afficher les bordures de <col> <thead> <tfoot> <tr>
mais qui ne permet pas de fixer des espaces entre les cellules par border-spacing:10px 20px;
ni d'afficher les cellules vides par empty-cells:hide;
Valeurs par défaut
\ | A | B | C | D | E |
L\C | C1 | C2 | C3 | C4 | C5 |
L1 | 1 | 2 | 3 | 4 | 5 |
L2 | 6 | | | | 10 |
L3 | 11 | 12 | 13 | 14 | 15 |
L4 | 16 | 17 | 18 | 19 | 20 |
L5 | 21 | 22 | 23 | 24 | 25 |
\ | A | B | C | D | E |
border-collapse:separate;
border-spacing:0;
empty-cells:hide;
\ | A | B | C | D | E |
L\C | C1 | C2 | C3 | C4 | C5 |
L1 | 1 | 2 | 3 | 4 | 5 |
L2 | 6 | | | | 10 |
L3 | 11 | 12 | 13 | 14 | 15 |
L4 | 16 | 17 | 18 | 19 | 20 |
L5 | 21 | 22 | 23 | 24 | 25 |
\ | A | B | C | D | E |
border-collapse:separate;
border-spacing: 5px 20px;
empty-cells:hide;
\ | A | B | C | D | E |
L\C | C1 | C2 | C3 | C4 | C5 |
L1 | 1 | 2 | 3 | 4 | 5 |
L2 | 6 | | | | 10 |
L3 | 11 | 12 | 13 | 14 | 15 |
L4 | 16 | 17 | 18 | 19 | 20 |
L5 | 21 | 22 | 23 | 24 | 25 |
\ | A | B | C | D | E |
border-collapse:collapse;
\ | A | B | C | D | E |
L\C | C1 | C2 | C3 | C4 | C5 |
L1 | 1 | 2 | 3 | 4 | 5 |
L2 | 6 | | | | 10 |
L3 | 11 | 12 | 13 | 14 | 15 |
L4 | 16 | 17 | 18 | 19 | 20 |
L5 | 21 | 22 | 23 | 24 | 25 |
\ | A | B | C | D | E |
border-collapse:collapse;
border-spacing: 5px 20px; sans effet
empty-cells:hide; sans effet
\ | A | B | C | D | E |
L\C | C1 | C2 | C3 | C4 | C5 |
L1 | 1 | 2 | 3 | 4 | 5 |
L2 | 6 | | | | 10 |
L3 | 11 | 12 | 13 | 14 | 15 |
L4 | 16 | 17 | 18 | 19 | 20 |
L5 | 21 | 22 | 23 | 24 | 25 |
\ | A | B | C | D | E |
En savoir plus Table et aspect par CSS
Faire une grille avec border-collapse:separate;