Почему между рядами есть пробел?Я установил все поля и отступы на 0, но я не могу избавиться от пробела

Question

Я скопировал код таблицы из Bootstrap и установил для каждой строки свой собственный цвет фона, но между каждой 1 есть пробел, и я не знаю почему.

Я установил все границы, поля и отступы в 0 для всех "tr", "tbody" и "thead".

Вопрос: Что я могу сделать, чтобы предотвратитьпробелы вокруг ячеек таблицы?

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

}

Их можно легко переопределить, добавив в файл по умолчанию следующее:

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