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

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

你可以做其他线路2px的宽,如果这是可以接受的,那么至少你不会有不同的边框厚度:

table {
    border-collapse: separate;
    border-spacing: 4px 0;
}
table td, table th {
    border-width: 1px 2px;
    border-style: solid;
    border-color: black;
}
table tr:first-child th,
table tr:first-child td {
    border-top-width: 2px;
}
table tr:last-child th,
table tr:last-child td {
    border-bottom-width: 2px;
}

Answer 3

不，border-collapse不允许单独定义水平和垂直。您可以通过额外的标记来实现它（在表格上，这可能最终会产生大量额外的标记），所以我不建议这样做，但我会给出它的代码：

网页：

<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宽度可以是您想要的任何值。