HTML表格行垂直支柱*比行高度短*

Question

如何获得表格行垂直支柱（短于行高），或部分表格单元格边框，或表格行底部/顶部边距，如下所示？ ：

这是我从平面设计师那里得到的;你可以看到表格行背景（黑暗或透明）与行本身有点不同步，所以不要太依赖（背景与此无关）。

然而，关键是垂直白色支柱必须短于行高。

我想到的一个想法是在HTML表格中插入虚拟行，但它很糟糕吗？

Answer 1

使用：

border-spacing: 10px; /* or whatever your require */
border-collapse: separate;    

在你的桌元素

上

Demo Fiddle

示例HTML

<table>
    <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
    </tr>
    <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
    </tr>
    <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
    </tr>
</table>

示例CSS

table {
    background:teal;
    border-spacing: 10px;
    border-collapse: separate;
}
td {
    border-left:1px solid white;
    padding:0 20px;
}
td:first-child{
    border-left:none;
}

---

Alternatively..

您可以使用:before伪元素：

table {
    background:teal;
    border-collapse:collapse;
}
td {
    padding:10px 20px;
    position:relative;
}
tr:nth-child(odd) {
    background:grey;
}
td:before {
    content:'';
    border-left:1px solid white;
    height:50%;
    position:absolute;
    left:0;
    top:25%;
}
td:first-child:before {
    border:none;
}