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 séparé. 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
LigneNomPrénomE-mail
1JeanBaptise[email protected]
2ThomasSkant[email protected]

 

Partagez cet article

Laisser un commentaire

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