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

在thead和tbody之间增加一个额外的空间（ 来自不同stackoverflow问题的想法thead和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>