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

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

到目前为止，我已经尝试了几种方法，但我过得很愉快。首先，我尝试为每个td元素设置一个右边框，但我发现边框突破了整个表边框，在外部边框中产生了间隙。下面是代码和小提琴：

HTML:

小提琴：

我尝试的下一种方法是删除边框折叠：折叠并尝试利用表自身的单元格间距来实现我想要的。虽然我可以通过使用边框间距来删除垂直间距，但我不知道如何删除最左侧和最右侧单元格的水平间距

以下是该方法的代码：

HTML:

我还看到一个建议，我可以使用td:first child，然后使用td:first child+td，td:first child+td+td等等，但这看起来非常混乱，不太实际，因为我不知道最后会有多少列，而且可能会随时间而变化。（我本来会发布一个链接到这篇文章的，但由于我是新手，我不能发布超过两个链接——它的标题是“HTML：如何通过CSS设置列中每个表格单元格的样式？”）

我也不喜欢使用空列，只是因为看起来应该有更好的CSS替代品

---

你能帮忙吗？

首先-对标题使用

th

元素，不要“滥用”

td

。使CSS更加清晰

第二，让桌子做他们的事情，然后互相折叠。在

表格上使用
边框间距
——它在单独的表格元素上不起作用。完全按照您的需要设置单元格样式，创建带有白色厚边框的白色间隙，然后在最后一个单元格上使用单独的
：last child
规则再次取消该间隙：

.grid {
    font-family: segoe ui, calibri, arial, sans-serif;
    font-size: 12px;
    color: #5B636B;
    border: 1px solid #CCC;
    background-color: #FFF;
    border-spacing:0;
}
th {
    background-color: #ECEEF4;    
    font-weight:normal;
    text-align:left;
}
th,td {
    padding:4px 6px;
    border-right:3px solid white;
}
tr :last-child {
    border:0;
}

.
以下是一种方法（基于第二个示例）：

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

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

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

这就是你要找的吗

（由于最终数量未知，需演示三个以上）

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>

.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;
}

.grid {
    font-family: segoe ui, calibri, arial, sans-serif;
    font-size: 12px;
    color: #5B636B;
    border: 1px solid #CCC;
    background-color: #FFF;
    border-spacing:0;
}
th {
    background-color: #ECEEF4;    
    font-weight:normal;
    text-align:left;
}
th,td {
    padding:4px 6px;
    border-right:3px solid white;
}
tr :last-child {
    border:0;
}

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

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

<table class="grid">
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
        <th>Heading 4</th>
        <th>Heading 5</th>
        <th>Heading 6</th>
    </tr>
    ....

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