为什么行之间有空白？我将所有边距和填充设置为 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

选择2：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; 
}