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

Question

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

到目前为止，我已经尝试了几种方法，但我遇到了很多麻烦。首先，我尝试为每个 td 元素设置右边框，但我发现边框突破了整个表格边框，在外边框中形成了间隙。这是代码和 fiddle :

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 : Fiddle here .

我尝试的下一个方法是删除 border-collapse: collapse 并尝试利用表格自己的单元格间距来实现我想要的。虽然我可以使用 border-spacing 删除垂直间距，但我不知道如何删除最左边和最右边单元格的水平间距。

这是该方法的代码:

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

这是一种执行此操作的方法(基于您的第二个示例):

从表格中删除 border-spacing，然后在每个 td 中添加右边框，最后一个除外。

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

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

jsFiddle Demo