里面只有CSS表格边框间距
我已经努力工作了好几个月，谷歌没有帮助我。 我试图在表中标记<td>和<th>之间的间隔，但是当我这样做的时候，它会在外部进行间隔。 因此，表格不与其他任何内容。 所以它看起来像表格有一些填充。
我似乎无法find解决scheme。
这是一个问题的例子
有同样的问题，边界间距属性也增加了桌子周围的空间，据我所知，没有任何限制，只有“内部”，所以我用透明的边框，而不是：
table td { border-left: 1em solid transparent; border-top: 1em solid transparent; }
除了表格顶部和左边有“不需要的”间距之外，这样设置“边界间距”是正常的。
table td:first-child { border-left: 0; }
select第一列。
table tr:first-child td { border-top: 0; }
select第一行的td元素（假设表格的顶部以tr元素开头，相应地更改为th） 。
我find了一个方法来做到这一点的负边缘，并提高了史蒂芬的答案，即使它没有足够的内容，它可以让你占用100％的表。 解决方法是使表格宽度为100％，并在包含元素上使用负边距：
#container { margin: 0 -10px; } table { border-collapse: separate; border-spacing: 10px; } td, th { background-color: #ccf; padding: 5px; }
把它看作是一个jsFiddle
类似于史蒂文·沃钦所说的，负利润率可能是你最好的select。
或者，您可以使用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％不够宽）。
我用透明的边框优化了解决scheme，所以没有更多的斜切内边框。
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
使用负边距和正面填充的容器。
#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％的宽度，否则将会是20px太窄。
更多信息： svachon.com/blog/inside-only-css-table-border-spacing/
这是一个简单而干净的解决scheme。
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; }
