CSS:水平分隔和垂直折叠的表格边框

不, 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 如果你可能有其他部门在 table 数据。这个 margin 控制你的水平距离,当然,你的 padding 或 border 宽度可以是任何你想要的。

也许

table {
  border-spacing: 1px 0;
}

我能得到的最接近的是:

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

这可以在不在th&td单元格中使用额外的DIV元素的情况下实现。此解决方案在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;
}

变化 表Tr:第一个子Th 到 表Tr:第一个子td 如果表的第一行不包含表标题单元格(th)。

请看我的jsFiddle: Table with column spacing but collapsed row border

这就是你要找的吗?

table {
    border: 1px solid black;
}

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

它不使用 border-collapse 属性,但它创建一个外部表边框 <td> 在它自己的独立边界。