I created the following HTML
CSS
site with tables and I would like to remove the spaces between the rows, but I cannot remove it.
First I thought it is a border, but now I assume that it is a simple space.
I tried to remove it by changing the padding and margins or collapsing the borders, but all of them were unsuccessful.
How could I remove the space between the rows?
#confirmed{
background-color: #FEC3B3;
display: table;
border-collapse: collapse;
box-sizing: border-box;
text-indent: initial;
border-spacing: 2px;
border-color: #FEC3B3;
}
#hours{
background-color: black;
color: white;
text-align: center;
border-collapse: collapse;
border-color: black;
}
#extra1{
background-color: black;
color: white;
text-align: center;
border-collapse: collapse;
border-color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./style.css" />
<title> Name </title>
</head>
<body>
<header>
<center>
<table class="table1" align="center">
<tr>
<a href="#"><img src="./images/a.jpg" alt="a"/> </a> </center>
</tr>
<tr id="hours">
<td><h3>48 HOURS ONLY </h3> </td>
</tr>
<tr id="extra1">
<td><h3>EXTRA 15% OFF YOUR NEXT ORDER | CODE : BLACK </h3> </td>
</tr>
<tr id="confirmed">
<th rowspan="2"><img src="./images/bracelate_07.jpg" alt="bracelate_07"/></th>
<td><h1> YOUR ORDER IS CONFIRMED!</h1></td>
</tr>
</center>
</header>
</body>
</html>
Put
border-collapse: collapse
on table tag