CSS - 删除第一列和最后一列的边框间距

Question

我试图通过用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">
<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: separate;
    border-spacing: 5px 0px;
    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;
}

我也看到了一个建议,我可以使用td:first-child和随后的td:first-child + td,td:first-child + td + td等等,但这看起来非常混乱而且不太实用,因为我不知道最后会有多少列,它可能会随着时间的推移而变化.(我会发布这个帖子的链接但是因为我是新的我不能发布超过两个链接 - 它的标题是"HTML:如何通过CSS在列中设置每个表格单元格？")

我也不热衷于使用空列,实际上只是因为它似乎应该是一个更好的CSS替代品.

你能帮忙吗？

Answer 1

这是一种方法(基于你的第二个例子):

从表中删除边框间距,然后在每个td中添加右边框,但最后一个除外.

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

.grid td:last-child {
  border-right: 0;   
}

jsFiddle演示