在行之间的分隔线之前/之后具有间距的表

Question

我正在尝试构建一个在行之间有分隔线的HTML表格。 我主要担心的是我需要在我的tbody中添加左/右填充。 我尝试了不同的东西，例如：

• 添加:before/:after浮动元素以添加空格
• 将border-collapse: collapse添加到表中，然后为tbody添加边框，但是我在桌子上丢失了边框

这是我的表：

这就是我需要做的事情：

来源的Codepen： http://codepen.io/anon/pen/gojuw

你有什么建议吗？

由于

Answer 1

如何分别在第一个和最后一个<td>设置左右边框？请参阅here中的工作示例。它的工作原理如下：

HTML：

<div id="table_wrapper">
    <table>
        <thead>
            <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td></tr>
        </thead>
        <tbody>
            <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td></tr>
            <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td></tr>
            <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td></tr>
        </tbody>
    </table>
</div>

CSS：

#table_wrapper {
    border: 1px solid #ddd;
}
table {
    border-collapse: collapse;
}
thead td {
    background-color: #eee;
}
thead td:first-child {
    border-left: 20px solid #eee;
}
thead td:last-child {
    border-right: 20px solid #eee;
}
tbody td {
    background-color: white;
}
tbody td:first-child {
    border-left: 20px solid white;
} 
tbody td:last-child {
    border-right: 20px solid white;
}

Answer 2

我在我的代码中尝试这个，它可以正常显示你想要的

<div id="table_prove">
    <table>
        <thead>
            <tr><td></td><td>Item 1</td><td>Item 2</td><td>Item 3</td><td></td></tr>
        </thead>
        <tbody>
            <tr><td></td><td>Item 1</td><td>Item 2</td><td>Item 3</td><td></td></tr>
            <tr><td></td><td>Item 1</td><td>Item 2</td><td>Item 3</td><td></td></tr>
            <tr><td></td><td>Item 1</td><td>Item 2</td><td>Item 3</td><td></td></tr>
        </tbody>
    </table>
</div>

你可以看到我添加一个＆＃34;＆＃34;将您的第一个项目和最后一个项目从表格中分离出来，您可以调整表格和td的大小，我希望我帮助您