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： Fiddle here

我尝试的下一个方法是删除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 Demo

Answer 2

首先 - 使用标题的th元素，不要“滥用”td。使CSS变得更加清晰。

其次，让桌子做他们的事情并且崩溃到彼此。在border-spacing上使用table - 它不适用于单独的表格元素。按照您想要的样式设置单元格样式，使用白色粗边框创建白色间隙，然后使用单独的: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;
}

Sample fiddle here

Answer 3

这是你要找的吗？

Live demo with 6 columns

（自最终号码未知以来证明超过三个）

HTML

将标题上的<td>更改为<th>

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

CSS更改

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

删除border-collapse