仅内部 CSS 表格边框间距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8806161/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS table border spacing inside only
提问by user1112081
I have trying to work this out for months, and Google hasn't helped me. I'm trying to have spacing between <td>and <th>tags in a table, but when I do, it does spacing in the outside. Therefore, the table isn't inline with anything else. So it looks like the table has some padding.
几个月来我一直在努力解决这个问题，但谷歌没有帮助我。我试图在表格中的<td>和<th>标签之间留有间距，但是当我这样做时，它在外面有间距。因此，该表不与其他任何内容内联。所以看起来表格有一些填充。
I can't seem to find a solution.
我似乎找不到解决方案。
Hereis an example of the issue
这是问题的一个例子
回答by JumpStomp
Had the same problem, the border spacing property was adding space around the table as well, and to my knowledge, there wasn’t anyway to limit it to only ‘the inside’, so I used transparent borders instead:
有同样的问题，边框间距属性也在桌子周围增加空间，据我所知，无论如何都没有将它限制在“内部”，所以我使用透明边框代替：
table td {
border-left: 1em solid transparent;
border-top: 1em solid transparent;
}
This sets ‘border spacing’ as normal, except that there’s ‘unwanted’ spacing at the top and left of the table.
这将“边框间距”设置为正常，除了表格顶部和左侧有“不需要的”间距。
table td:first-child {
border-left: 0;
}
Selects the first column.
选择第一列。
table tr:first-child td {
border-top: 0;
}
Selects the td elements of the first row (assuming that the top of the table starts with a tr element, change accordingly for th).
选择第一行的 td 元素（假设表格的顶部以 tr 元素开始，对 th 进行相应的更改）。
回答by Marc Stober
I found a way to do this with negative margins and improves on Steven's answer in that it lets you make the table take up 100% even if it doesn't have enough content. The solution is to make the table width 100% and use a negative margin on a containing element:
我找到了一种用负边距来做到这一点的方法，并改进了史蒂文的答案，因为它可以让你让表格占据 100%，即使它没有足够的内容。解决方案是使表格宽度为 100% 并在包含元素上使用负边距：
#container {
margin: 0 -10px;
}
table {
border-collapse: separate;
border-spacing: 10px;
}
td, th {
background-color: #ccf;
padding: 5px;
}
回答by TLindig
I optimized the solution with transparent border so it has no more obliquely cut inner borders.
我优化了带有透明边框的解决方案，因此它不再有斜切的内边框。
1) let table fill horizontal and collapse the borders:
1）让表格水平填充并折叠边框：
table {
width: 100%;
border-collapse: collapse;
}
2) Set all borders of table cells to width 0 and prevent background is drawn below the border.
2) 将表格单元格的所有边框设置为宽度 0，并防止在边框下方绘制背景。
td {
border: 0px solid transparent;
background-clip: padding-box;
}
3) Set inner space with transparent border but not to first row and column.
3) 设置带有透明边框的内部空间，但不是第一行和第一列。
tr > td + td {
border-left-width: 10px;
}
tr + tr > td {
border-top-width: 10px;
}
here is a jsbin
这是一个jsbin
回答by doubleJ
Similar to what Steven Vachon said, negative margin may be your best bet.
与 Steven Vachon 所说的类似，负利润率可能是您最好的选择。
Alternatively, you can use calc()to fix the problem.
或者，您可以使用calc()来解决问题。
CSS:
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);
}
Just add whatever margin you take off or the width will be too narrow (100% isn't wide enough).
只需添加您删除的任何边距，否则宽度会太窄（100% 不够宽）。
回答by Steven Vachon
Use negative margins and a container with positive padding.
使用负边距和带有正填充的容器。
#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 */
}
Just make sure that you have substantial content for it to stretch the table to 100% width, or else it'll be 20px too narrow.
只要确保你有足够的内容来将表格拉伸到 100% 宽度，否则它会太窄 20px。
More info: svachon.com/blog/inside-only-css-table-border-spacing/
回答by Abhishek Goel
Here is the cool hack to do that
这是一个很酷的技巧来做到这一点
table {
border-collapse: inherit;
border-spacing: 10px;
width: calc(100% + 20px);
margin-left: -10px;
}
use margin-left: -10px;to remove left padding but in the right there will be 20px padding. Now to update it use width: calc(100% + 20px);
用于margin-left: -10px;删除左侧填充，但在右侧将有 20px 填充。现在更新它使用width: calc(100% + 20px);
回答by apen
Here is a simple and clean solution.
这是一个简单而干净的解决方案。
HTML
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
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;
}
