CSS：表格边框水平分隔并垂直折叠

Question

有没有办法应用于表格单元格的单独和折叠边框属性已折叠但已分开？感谢

编辑：这是想要的结果：

Answer 1

也许

table {
  border-spacing: 1px 0;
}

Answer 2

我能得到的最接近的是：

table {
    border-collapse: separate;
    border-spacing: 4px 0;
}
table td, table th {
    border: 1px solid black;
}

不幸的是，这会在行之间创建一条双粗线。 <{1}}属性中不允许使用负值，否则border-spacing可能会起作用。

---

如果可以接受，你可以将其他线宽2px宽，那么至少你不会有不同的边框厚度：

-1px

Answer 3

不，border-collapse不允许单独定义水平和垂直。你可以通过额外的标记来实现它（在桌面上，最终可能很多的额外标记），所以我不建议，但我会给出代码：

HTML：

<table>
   <tr>
     <th><div>Header 1</div></th>
     <th><div>Header 2</div></th>
   </tr>
   <tr>
     <td><div>Content 1</div></td>
     <td><div>Content 2</div></td>
   </tr>
   <tr>
     <td><div>Content 3</div></td>
     <td><div>Content 4</div></td>
   </tr>
</table>

和css：

table {border-collapse: collapse;}
th, td { border: 0; padding: 0;}
th div, td div {margin: 5px 0 0; border: 1px solid #ff0000; padding: 5px;}

当然，您可能希望在div或子选择器上使用某个类，如果您在div数据中可能有其他div，则只能定位table 。 margin控制您的水平差距，当然，您的padding或border宽度可以是您想要的任何宽度。

Answer 4

这可以在不使用th＆amp; amp;中的额外div元素的情况下实现。 td细胞。此解决方案适用于Chrome，Firefox和IE8 +。

<强> CSS

table
{
    border-collapse: separate;
    border-spacing: 10px 0px;
}
td, th
{
    padding: 10px;
    border: 1px solid #000;
    border-top: none;
}
table tr:first-child th
{
    border-top: 1px solid #000;
}

如果表的第一行不包含表头单元格（TH），则将表tr：第一个孩子更改为表tr：first-child td 。 / p>

请在此处查看我的jsfiddle：Table with column spacing but collapsed row border

Answer 5

这是你要找的吗？

table {
    border: 1px solid black;
}

table td {
    border: 1px solid red;
    margin: 3px;  
}

它不使用border-collapse属性，但它会在每个<td>的独立边框中创建一个外部表格边框。