CSS表格边框间距仅在内部生效。

Question

我已经试了几个月，但是谷歌没有帮到我。我想在表格的<td>和<th>标签之间增加间距，但是当我这么做时，会使得表格外围也出现间距。因此，表格与其他内容不在同一行上，看起来就像表格有一些填充。

我似乎找不到解决方案。

这里提供了一个示例

- user1112081

---

你编程进展如何？能否添加一些 jsfiddle ？ - mas-designs

Answer 1

我使用透明边框对解决方案进行了优化，因此不再具有倾斜的内边框。

1）让表格水平填充并折叠边框：

table {
  width: 100%;
  border-collapse: collapse;
}

2）将表格单元格的所有边框宽度设置为0，并防止在边框下方绘制背景。

td {
  border: 0px solid transparent;
  background-clip: padding-box;
}

3) 使用透明边框设置内部空白，但不包括第一行和第一列。

tr > td + td {
  border-left-width: 10px;
}

tr + tr > td {
  border-top-width: 10px;
}

这里有一个jsbin

- TLindig

---

这是答案！ - incleaf

这绝对是最好的选择！ - Kent

我很想点赞两次... - Risadinha

Answer 2

我遇到了同样的问题，边框间距属性也会在表格周围添加空白。据我所知，没有任何方法可以将其限制在“内部”，因此我使用了透明边框代替：

table td {
   border-left: 1em solid transparent;
   border-top: 1em solid transparent;
}

这将‘border spacing’设置为正常，但在表格的顶部和左侧存在‘不需要的’间距。

table td:first-child {
   border-left: 0;
}

选择第一列。

table tr:first-child td {
   border-top: 0;
}

选择第一行的td元素(假设表格顶部以tr元素开始，如果是th元素则相应更改)。

- JumpStomp

---

虽然这是一个聪明的技巧，但对于那些已经使用边框属性来为单元格进行样式设计的人来说并没有真正的用处。 - animuson

@vsync 是正确的 - 透明边框只显示单元格的背景颜色。因此看起来单元格填充只是变得更大了。 - HughHughTeotl

@vsync：如果您还使用CSS属性background-clip: padding-box;，它可以正常工作。没有背景绘制在边框下方（背景延伸到填充的外沿）。 - TLindig

Answer 3

我找到了一种方法，可以通过使用负边距来实现，并且在Steven的答案上进行了改进，因为它可以让你即使没有足够的内容也能使表格占用100%。解决方案是将表格宽度设置为100％，并在包含元素上使用负边距:

#container {
    margin: 0 -10px;
}
table {
    border-collapse: separate;
    border-spacing: 10px;
}
td, th {
    background-color: #ccf;
    padding: 5px;
}

点击查看 jsFiddle 示例

- Marc Stober

---

@vsync 你的意思是什么？在我链接到的 jsFiddle 中，使用表格宽度为100％在 Firefox 中仍然可以正常工作。 - Marc Stober

抱歉，是因为你用 div 包装了它所以才生效了，但对于表格本身，两侧的负边距不起作用。我没有解释清楚，我的错。 - vsync

@vsync 是的，你需要用一个 div 把它包起来，这样才能让这个特定的解决方案起作用。 - Marc Stober

是的，我知道你需要用一个 div 来包装它，这样特定的解决方案才能起作用。但再次听到这个总是很好的。 - vsync

如果您需要为TD的边框设置样式，这是最佳解决方案。 - Reinier68

Answer 4

与Steven Vachon所说的类似，负边距可能是最好的选择。

另外，您可以使用calc()来解决问题。

CSS：

/* border-collapse and border-spacing are css equivalents to <table cellspacing="5"> */

.boxmp {
    width:100%;
    border-collapse:separate;
    border-spacing:5px 0;
}

/* border-spacing includes the left of the first cell and the right of the last cell
    negative margin the left/right and add those negative margins to the width
    ios6 requires -webkit-
    android browser doesn't support calc()
    100.57% is the widest that I could get without a horizontal scrollbar at 1920px wide */

.boxdual {
    margin:0 -5px;
    width:100.57%;
    width:-webkit-calc(100% + 10px);
    width:calc(100% + 10px);
}

只需加上您减少的任何边距，否则宽度将太窄（100％不够宽）。

- doubleJ

---

我认为这是最好的答案，因为现在 calc 得到了广泛支持。 - Andrew

Answer 5

这里有一个很酷的技巧来实现这个。

table {
    border-collapse: inherit;
    border-spacing: 10px;
    width: calc(100% + 20px);
    margin-left: -10px;
}

使用margin-left: -10px;可以去掉左边的填充，但右边会有20像素的填充。现在要更新它，请使用width: calc(100% + 20px);

- Abhishek Goel

Answer 6

使用负边距和带有正填充的容器。

#container {
    box-sizing: border-box; /* avoids exceeding 100% width */
    margin: 0 auto;
    max-width: 1024px;
    padding: 0 10px;    /* fits table overflow */
    width: 100%;
}

table {
    border-collapse: separate;
    border-spacing: 10px;
    margin: 0 -10px;    /* ejects outer border-spacing */
    min-width: 100%;    /* in case content is too short */
}

td {
    width: 25%;     /* keeps it even */
}

请确保您有足够的内容来展开表格以达到100%的宽度，否则将会比实际宽度窄20像素。

更多信息：svachon.com/blog/inside-only-css-table-border-spacing/

- Steven Vachon

---

这对于本身不扩展到100％宽度的表格无效。请参见http://jsfiddle.net/EXe8z/（只需切掉最后两列）。您将在右侧获得三倍填充和左侧的正常填充。 - animuson

我在我的回答中已经说过了：“只需确保您有足够的内容来将表格拉伸到100％宽度即可”。我构建的大多数使用表格的应用程序都具有超过一位数字长度的内容。 - Steven Vachon

Answer 7

这是一个简单而干净的解决方案。

HTML

<div class="column-container">
  <div class="column-children-wrapper">
    <div class="column">One</div>
    <div class="column">Two</div>
    <div class="column">Three</div>
    <div class="column">Four</div>
  </div>
</div>

CSS

.column-container {
  display: table;
  overflow: hidden;
}

.column-children-wrapper {
  border-spacing: 10px 0;
  margin-left: -10px;
  margin-right: -10px;
  background-color: blue;
}

.column {
  display: table-cell;
  background-color: red;
}

https://jsfiddle.net/twttao/986t968c/

- apen