Как я могу позволить html границам таблицы слиться друг с другом в css

Question

В текущем проекте у меня есть трехколонный стол.

<table>
    <tr>
        <th>Datum</th>
        <th>Entschuldigt?</th>
        <th>Vermerkt von</th>
    </tr>
</table>

Моя текущая таблица стилей для таблицы выглядит следующим образом:

th {
    border-bottom: 1px solid black;
}

td + td {
    border-left: 1px solid black;
    border-right: 1px solid black;
}

Теперь таблица выглядит следующим образом

Сейчас Я хотел бы удалить эти небольшие пробелы, чтобы разделители столбцов и разделители заголовков были solid, а не такие штриховые. Каждая помощь очень ценится

Answer 1

Вам нужно использовать border-collapse: collapse на столе:

th {
  border-bottom: 1px solid black;
}

td+td {
  border-left: 1px solid black;
  border-right: 1px solid black;
}

table {
   border-collapse: collapse;
}

<table>
  <tr>
    <th>Datum</th>
    <th>Entschuldigt?</th>
    <th>Vermerkt von</th>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
</table>

Answer 2

table {
  border-collapse: collapse;
}  
th, td {
  padding: 5px;
  text-align: center;
  font-size: 20px;
  border-left: 1px solid black;
}

th:nth-child(1), td:nth-child(1) {
  border-left: none;
}

tr:nth-child(2){
   border-top: 1px solid black;
}

<table>
  <tr>
    <th>Datum</th>
    <th>Entschuldigt?</th>
    <th>Vermerkt von</th>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
</table>

Answer 3

Другой подход:

<table cellspacing="0">