小编Fra*_*erm的帖子

我试图通过用3px白色边框分隔每个内部列来设置表格,如下所示:

到目前为止,我已经尝试了几种方法,但我有一点时间.首先,我尝试为每个td元素设置一个右边框,但我发现边框突破了整个表边框,在外边框中创建了间隙.这是代码和小提琴:

HTML:

<table class="grid">
<tr><td>Heading 1</td><td>Heading 2</td><td>Heading 3</td></tr>
<tr><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
<tr><td>A3</td><td>B3</td><td>C3</td></tr>
</table>

CSS:

.grid {
    font-family: segoe ui, calibri, arial, sans-serif;
    font-size: 12px;
    color: #5B636B;
    border: 1px solid #CCC;
    border-collapse: collapse;
    background-color: #FFF;
}

.grid tr {
    height: 30px;
    border-bottom: 1px solid #F4F4F4;
}

.grid tr:first-child {
    border: none;
    background-color: #ECEEF4;
}

.grid tr:last-child {
    border: none;
}

.grid td {
    padding: 0px 5px 0px 5px;
    border-right: 3px solid #FFF;
}

FIDDLE: 在这里小提琴.

我尝试的下一个方法是删除border-collapse:collapse并尝试利用表自己的单元格间距来实现我想要的.虽然我可以通过使用边框间距来移除垂直间距,但我无法弄清楚如何从最左边和最右边的单元格中移除水平间距.

这是该方法的代码:

HTML:

<table class="grid"> …