行之间为什么会有空白？我将所有边距和填充都设置为0，但是我无法摆脱空白

Question

我从Bootstrap复制了表代码，并将每一行设置为具有自己的背景色，但是每1行之间都有空白，我不知道为什么。

我将所有“ tr”，“ tbody”和“ thead”的所有边框，边距和填充都设置为0。

问题：如何防止表格单元格周围出现空白？

#C1{

  margin-top: 40px;
  width: 75%;
  border: 1px solid black;
  padding: 0px;
}
.table-red{
  background-color: red;
  color: #ffffff
}
.table{
  margin-bottom: 0px;
  padding: 0px;
}

.table-striped tbody tr:nth-of-type(even){

    background-color: red;
    color: white;

}
.table-striped tbody tr:nth-of-type(odd){
    background-color: blue;
    color: white;
    border: 0;
}
thead{
    background-color: green;
    border: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
}
th{
    border: 0px;
}
tbody{
    margin-top: 0px;

}   

 <div class="container" id="C1">
    <table class="table table-striped">
      <thead >
        <tr>
          <th scope="col">#</th>
          <th scope="col">First</th>
          <th scope="col">Last</th>
          <th scope="col">Handle</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>
 </div>

空白应该消失

Answer 1

选项1：（CSS）

border-collapse属性设置表边框是折叠成单个边框还是像标准HTML一样分隔。

border-spacing属性设置相邻单元格的边界之间的距离。

table {
    ...
    border-spacing:0;
    border-collapse:collapse;
}

选项2：（HTML）

cellspacing属性指定单元格之间的间隔（以像素为单位）。

<table .. cellspacing="0"> .. </table>

opt1：https://www.w3schools.com/cssref/pr_border-collapse.asp
＆https://www.w3schools.com/cssref/pr_border-spacing.asp

opt2：https://www.w3schools.com/tags/att_table_cellspacing.asp

编辑：OP具有从CDN中提取的引导文件，并且有2个CSS规则添加了边框：

FILE: _tables.scss LINE: 5

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
}

FILE: bootstrap.css LINE: 1524

.table td, .table th {

    padding: .75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;

}

可以通过将以下内容添加到默认的css文件中来轻松覆盖这些内容：

.table thead th { 
    border-bottom: none !important; 
}
.table td, .table th { 
    border-top:none !important; 
}