En utilisant des tables TABLE, les débutants en production HTML découvrent comment modifier l’épaisseur des bords, car le réglage par défaut des arêtes TABLE est très épais même s’il est de 1px. Par conséquent, il existe d’autres méthodes utilisées pour créer des bordures de lignes fines, et voici une méthode d’utilisation du CSS pour implémenter des lignes fines, qui est très efficace et compatible avec tous les navigateurs.
Si vous vous contentez de définir la bordure pour une table de lignes fine, il est difficile de garantir la compatibilité du navigateur. Une pratique courante est d’utiliser le « border-collapse :collapse » de CSS2 ; bordures de tables de fusion d’attributs ; Et fixez les bordures gauche et supérieure pour les éléments de table, et les bordures droite et inférieure pour les éléments th et td.
HTML :
<table> <tr> <th>Tête de tableau (ligne1, col1)</th> <th>tête de tableau (ligne1, col2)</th> <th>tête de tableau (ligne1, col3)</th> </tr> <tr> <td>données de table (ligne1, col1)</td> <td>Données de table (ligne 1, COL2)</td> <td>Données de table (ligne 1, COL3)</td> </tr> <tr> <td>Données de tableau (ligne 2, COL1)</td> <td>Données de tableau (ligne 2, COL2)</td> <td>Données de table (ligne2, col3)</td> </tr> CSS</table> :
table{bordure-effondrement :collapse ; espacement des bordures : 0 ; bordure gauche : 1px solide #888 ; Bordure supérieure : 1 px solide #888 ; Contexte : #efefef ; } th,td{border-right :1px solid #888 ; bordure-bas : 1px solide #888 ; Rembourrage : 5px 15px ; } th{font-weight :grad ; Contexte : #ccc ; } |