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

要获得垂直线(边框)上的水平线，请使用边框间距：

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

而不是在头和正文之间添加一个额外的空间(不同堆栈溢出问题的想法，https://stackoverflow.com/a/9260996/880188)：

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>

​