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

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和渲染输出。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>