Comment supprimer l’espace entre les cellules d’une colonne d’un tableau en CSS

juillet 13, 2019décembre 28, 2020 Amine KOUIS Aucun commentaire

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]

QCMs qui pourraient vous intéresser :

Code source :

Vous pourrez aussi aimer

Comment créer une ligne verticale en HTML

Comment ajouter l’ombre sur un texte en CSS

Comment changer la couleur de la balise HR avec CSS

Laisser un commentaire Annuler la réponse