HTML 表格：如何获得连续的垂直线和中断的水平线

Question

我需要用不同的网格线设置一个 html 表格的样式。水平线应该是连续的（前景），垂直线应该像在背景中一样中断，被水平线覆盖。一些水平线应该是 1px，另一些是 2px 高度垂直线/边框应该是 3px，但表格的左右两侧不应有空格或边框（以便表格具有 100% 的宽度并出现左右有道理）。结果应该看起来像附加的图像。任何帮助表示赞赏。

我尝试了border-collapse: separate; 和不同的border-spacing，但我无法获得不同的水平线高或表格的左右边框。

表结构见 sn-p。无法更改 html，即我无法添加假列。

    <table>
      <thead>
        <tr>
          <th>th-1</th>
          <th>th-2</th>
          <th>th-3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>tr-1, td-1</td>
          <td>tr-1, td-2</td>
          <td>tr-1, td-3</td>
        </tr>
        <tr>
          <td>tr-2, td-1</td>
          <td>tr-2, td-2</td>
          <td>tr-2, td-3</td>
        </tr>
      </tbody>
    </table>

Answer 1

要让水平线覆盖垂直线（边框），请使用边框间距：

table {
  border-collapse: separate;
  border-spacing: 0px 1px;
}

在thead 和tbody 之间添加一个额外的空间（来自不同stackoverflow 问题Spacing between thead and tbody 的想法）：

thead:after {
  display: block;
  height: 0px;
  content: "";
  border: none;
}

查看完整的 CSS 和渲染输出的代码。

table {
    /* Create border between rows.*/
    border-collapse: separate;
    border-spacing: 0px 1px ;
    background-color: #697a91;
    width: 100%;
}
thead:after {
    /* Increase border between thead and tbody.*/
    display: block;
    height: 0px;
    content: "";
    border: none;
}
th {
    background-color: #dce0e6;
    text-align: center;
}
th,
td {
    padding: 0.5em;
    border-right: 3px solid white;
}
th:last-child,
td:last-child {
    border: none;
}
td {
    background-color: #eff4f6;
}

<table>
  <thead>
    <tr>
      <th>th-1</th>
      <th>th-2</th>
      <th>th-3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>tr-1, td-1</td>
      <td>td-2</td>
      <td>td-3</td>
    </tr>
    <tr>
      <td>tr-2, td-1</td>
      <td>td-2</td>
      <td>td-3</td>
    </tr>
  </tbody>
</table>

Answer 2

border-collapse: collapse 允许为行设置边框，请检查：

body {
    margin: 0;
}
table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
}
table tr {
    background-color: #f4f8f9;
    border-top: 1px solid #78858e;
    border-bottom: 1px solid #78858e;
}
table tr:first-child {
    background-color: #e1e7e7;
    border-bottom: 2px solid #78858e;
}
table td {
    border-right: 3px solid white;
}
table td:last-child {
    border-right: none;
}

<table>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td rowspan="2">4</td>
    </tr>
    <tr>
        <td>5</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
    </tr>
</table>