HTML 表格 : How to get continuous vertical and interrupted horizontal lines

Question

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

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

请参阅表结构片段。无法更改 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

要使水平线覆盖垂直线(边框)，请使用 border-spacing:

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>