首页 > 解决方案 > 如何删除表格中行之间的空格?

问题描述

我用表格创建了以下HTML CSS站点,我想删除行之间的空格,但我无法删除它。

一开始我认为它是一个边界,但现在我假设它是一个简单的空间。

我试图通过更改填充和边距或折叠边框来删除它,但都没有成功。

我怎样才能删除行之间的空间?

#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>

标签: htmlcsshtml-tablerow

解决方案


border-collapse: collapse

在表标签上


推荐阅读