在行之间的分隔线之前/之后有间距的表格答案

【问题标题】：Table with spacing before/after separation line between rows在行之间的分隔线之前/之后有间距的表格
【发布时间】：2014-06-11 00:09:16
【问题描述】：

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

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

这是我的桌子：

这就是我需要做的：

源代码： http://codepen.io/anon/pen/gojuw

你有什么建议吗？

谢谢

【问题讨论】：

标签： html css sass

【解决方案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;
}

【讨论】：

【解决方案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>

如您所见，我添加了一个“”，将您的第一项和最后一项与表格分开，您可以调整表格和 td 的大小，希望对您有所帮助

【讨论】：