Comment supprimer l’espace entre les cellules d’une colonne d’un tableau en CSS
Par défaut, il existe un espace entre les cellules de tableau adjacentes, car le mode de bordure par défaut pour les tableaux HTML est separate. Mais vous pouvez enlever ceci et créer une table sans aucun espacement de cellules en définissant simplement la valeur de la propriété CSS border-collapse pour les éléments <table> à collapse, comme illustré dans l’exemple ci-dessous:
Code source :
<!DOCTYPE html> <html> <head> <style> table{ border-collapse: collapse; } table th, table td{ padding: 10px; } table, th, td{ border: 1px solid #000; } table th { background-color: #272b33; color: #fff; vertical-align: middle; padding-left: 10px; padding: 20px; } </style> </head> <body> <table> <thead> <tr> <th>Ligne</th> <th>Nom</th> <th>Prénom</th> <th>E-mail</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Jean</td> <td>Baptise</td> <td>[email protected]</td> </tr> <tr> <td>2</td> <td>Thomas</td> <td>Skant</td> <td>[email protected]</td> </tr> </tbody> </table> </body> </html>
Résultat | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|