Search code examples
htmlcsshtml-tablerow

How to remove space between lines in the table?


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>


Solution

  • Put

    border-collapse: collapse
    

    on table tag