如何让 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;
}

现在桌子看起来像这样

现在我想删除那些小空格，以便列分隔符和标题分隔符是实心的，而不是那种虚线。非常感谢每一个帮助

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>