CSS表格边框间距仅在内部答案

【问题标题】：CSS table border spacing inside onlyCSS表格边框间距仅在内部
【发布时间】：2012-02-07 00:50:29
【问题描述】：

几个月来我一直在努力解决这个问题，但 Google 没有帮助我。我试图在表格中的<td> 和<th> 标记之间设置间距，但是当我这样做时，它会在外部设置间距。因此，该表不与其他任何内容内联。所以看起来表格有一些填充。

我似乎找不到解决办法。

Here 是问题的一个例子

【问题讨论】：

你在编码方面有多远可以添加一些 jsfiddle 吗？

标签： css html-table

【解决方案1】：

遇到了同样的问题，边框间距属性也在桌子周围增加了空间，据我所知，无论如何都没有将它限制在“内部”，所以我使用了透明边框：

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

这会将“边框间距”设置为正常，除了表格顶部和左侧有“不需要的”间距。

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

选择第一列。

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

选择第一行的td元素（假设表格顶部以tr元素开始，为th相应改变）.

【讨论】：

虽然是一个聪明的技巧，但对于已经使用边框属性来设置单元格样式的人来说，这并不是真正有用的。
@vsync 是正确的 - 透明边框只显示单元格的背景颜色。所以看起来单元格内边距变大了。
@vsync：如果您还使用 CSS 属性 background-clip: padding-box;，它可以正常工作。边框下方没有绘制背景（背景延伸到填充的外边缘）。

【解决方案2】：

我优化了透明边框的解决方案，使其不再有斜切的内边框。

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

【讨论】：

这就是答案！
这绝对是最好的方法！
我想投票两次...

【解决方案3】：

我找到了一种以负边距执行此操作的方法，并改进了 Steven 的回答，因为它可以让你让表格占据 100%，即使它没有足够的内容。解决方案是使表格宽度为 100%，并在包含元素上使用负边距：

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

See it as a jsFiddle

【讨论】：

@vsync 你到底是什么意思？它仍然在我链接到的 jsFiddle 中（在 Firefox 中）为我工作，表格宽度为 100%。
ho 对不起，是的，因为你用div 包裹它所以它可以工作，但是对于桌子本身，两边的负边距不起作用..我没有解释自己，我的坏
@vsync 是的，您确实需要用 div 包装它才能使此特定解决方案起作用。
是的，我知道你需要用一个 div 包装它才能使这个特定的解决方案工作。但再次听到它总是很高兴。
太棒了！谢谢。

【解决方案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% 不够宽）。

【讨论】：

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

【解决方案5】：

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

#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 像素会太窄。

【讨论】：

这不适用于本身不能扩展到 100% 宽度的表格。见jsfiddle.net/EXe8z（只剪掉最后两列）。您最终会在右侧使用三重填充，在左侧使用普通填充。
我已经在我的回答中说明了这一点：“只要确保你有足够的内容来将表格拉伸到 100% 宽度”。我构建的大多数使用表格的应用程序都包含多于个位数长度的内容。

【解决方案6】：

这是一个很酷的技巧

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

使用margin-left: -10px; 删除左侧填充，但右侧将有 20 像素的填充。现在更新它使用width: calc(100% + 20px);

【讨论】：

【解决方案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/

【讨论】：