Question

我已经试图解决这个问题好几个月了，谷歌并没有帮助我。我正在尝试在表格中的<td>和<th>标签之间设置间距，但是当我这样做时，它会在外部间隔。因此，该表与其他任何内容都不一致。所以看起来桌子有一些填充。

我似乎无法找到解决方案。

Here是问题的一个例子

Answer 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元素开头，相应地更改为。

Answer 2

我找到了一种方法来做到这一点，带有负边距，并改善了史蒂文的答案，因为即使它没有足够的内容，它也可以使表格占据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

Answer 3

我使用透明边框优化了解决方案，因此不再倾斜切割内边框。

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

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％不够宽）。

Answer 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 px。

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

Answer 6

这是很酷的技巧

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

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

进行更新

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/

CSS表边框间距只在里面

7 个答案:

这是很酷的技巧