Удалить строки столбца в таблице

Question

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

Моя проблема заключается в том, что при разделении строк таблицы между строками появляется интервал. столбец.

Как убрать этот пробел, заполнив, таким образом, всю строку цветом фона?

DEMO

.tableTitles {
  text-align: left;
  font-family: 'Noto Sans', sans-serif;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0;
  color: #4D4F5C;
}

.circle {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  line-height: 32px;
  text-align: center;
  background: #4981C226;
  font-size: 13px;
  font-family: 'Noto Sans', sans-serif;
  letter-spacing: 0;
  color: #4981C2;
}

.tableColor {
  /* background: #F4F5F7 0% 0% no-repeat padding-box; */
  border-radius: 8px;
}

.myTable {
  border-collapse: separate;
  border-spacing: 7px;
}

.tableUserPhoto {
  width: 24px;
  height: 24px;
  transform: matrix(1, 0, 0, 1, 0, 0);
  border-radius: 8px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="card-table table-borderless myTable">
  <thead>
    <tr>
      <th scope="col tableTitles">Title</th>
      <th scope="col tableTitles">Title1</th>
      <th scope="col tableTitles">Title2</th>
      <th scope="col tableTitles">Title3</th>
    </tr>
  </thead>
  <tbody>
    <tr style="background-color: grey">
      <td class="tableTitles">
        Title
      </td>
      <td class="tableTitles">
        Title1
      </td>
      <td class="tableTitles">
        Title2
      </td>
      <td class="tableTitles">
        Title3
      </td>
    </tr>
    <tr style="background-color: grey">
      <td class="tableTitles">
        Title
      </td>
      <td class="tableTitles">
        Title1
      </td>
      <td class="tableTitles">
        Title2
      </td>
      <td class="tableTitles">
        Title3
      </td>
    </tr>
  </tbody>
</table>

Задача

Answer 1

border-spacing принимает два значения, горизонтальное и вертикальное.

Когда указаны два значения, первое значение определяет горизонтальный интервал между ячейками (то есть пространство между ячейками в соседних столбцах), а второе значение определяет вертикальный интервал между ячейками (т. е. пространство между ячейками в соседних строках).

MDN

---

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

Что я думаю вас хочу это:

  .myTable{
    border-collapse: separate;
    border-spacing: 0 7px;
  }

.myTable {
  border-collapse: separate;
  border-spacing: 0 7px;
}

<table class="card-table table-borderless myTable">
  <thead>
    <tr>
      <th scope="col tableTitles">Title</th>
      <th scope="col tableTitles">Title1</th>
      <th scope="col tableTitles">Title2</th>
      <th scope="col tableTitles">Title3</th>
    </tr>
  </thead>
  <tbody>
    <tr style="background-color: grey">
      <td class="tableTitles">
        Title
      </td>
      <td class="tableTitles">
        Title1
      </td>
      <td class="tableTitles">
        Title2
      </td>
      <td class="tableTitles">
        Title3
      </td>
    </tr>
    <tr style="background-color: grey">
      <td class="tableTitles">
        Title
      </td>
      <td class="tableTitles">
        Title1
      </td>
      <td class="tableTitles">
        Title2
      </td>
      <td class="tableTitles">
        Title3
      </td>
    </tr>
  </tbody>
</table>

Answer 2

Ваша проблема в том, что border-spacing создает пространство для строки и столбца, если вы не указываете два значения (как вы делаете).

Итак, вам нужно что-то сделать следующим образом:

.myTable {
    border-collapse: separate;
    border-spacing: 0px 7px;
}

Таким образом, эта таблица имеет 7px между каждой строкой и 0px между каждым столбцом.

Answer 3

удалить интервал границы или установить 0px в классе myTable

.myTable{
    border-collapse: separate;
    border-spacing: 0px;
}