如何删除表格中行之间的空格？答案

【问题标题】：How to remove space between lines in the table?如何删除表格中行之间的空格？
【发布时间】：2021-07-17 04:17:20
【问题描述】：

我创建了以下带有表格的HTMLCSS 站点，我想删除行之间的空格，但无法删除。

起初我认为它是一个边框，但现在我假设它是一个简单的空间。

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

如何删除行之间的空格？

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

【问题讨论】：

将border-collapse: collapse; 放在表格中，而不是每个<tr>。

标签： html css html-table row

【解决方案1】：

放

border-collapse: collapse

在表格标签上

【讨论】：

【解决方案2】：

将border-collapse: collapse; 放在表中，而不是每个<tr>。

#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;
    
  
  
}
table{
 border-collapse: collapse;
}

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

【讨论】：