How to remove spaces between cells in the HTML table

December 28, 2020 admin

By default, there is a space between adjacent table cells, because the default border mode for HTML tables is separate. But you can remove this and create a table without any cell spacing by simply setting the value of the CSS border-collapse property for the <table> elements to collapse, as shown in the example below:

CSS :

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;
}

HTML :

<!DOCTYPE html>
<html>
	<head>
		<style>
		     /* Put the CSS Style Here */
		</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>Emily</td>
					<td>Baptise</td>
					<td>[email protected]</td>
				</tr>
				<tr>
					<td>2</td>
					<td>Jean</td>
					<td>Skant</td>
					<td>[email protected]</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

Result