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

Question

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

• 添加:before/:after float 元素来添加空格
• 将 border-collapse: collapse 添加到表中，然后将边框添加到 tbody，但这样做我在表上丢失了边框

这是我的表格:

这就是我需要做的:

来源的代码笔: 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;
}