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
Ligne Nom Prénom E-mail
1 Jean Baptise [email protected]
2 Thomas Skant [email protected]

 

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *