仅限于CSS表格边框间距

Question

我试图将这个问题花费数月时间，Google并没有帮助我。我试图在表中标记<td>和<th>之间的空格，但是当我这样做时，它会在外部进行空格。因此，该表与其他任何内容都不是内联的。所以它看起来像表格有一些填充。

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

Here是问题

Answer 1

有同样的问题，边框间距属性被添加至存储表空间为好，据我所知的一个例子，有WASN’吨反正它限制为仅‘的里面’，所以我就用透明边框改为：

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

这台‘边框间距’正常，除了有’小号‘不需要表格顶部和左侧有210个间距。

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

选择第一列。

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

选择第一行的td元素（假设该表的顶部与TR元件开始，对第相应改变）。

Answer 2

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

#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/

Answer 3

什么史蒂芬瓦尚说，类似的，阴性切缘可能是你最好的选择。

或者，您可以使用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 4

我找到了一种方法来做到这一点与消极的利润率，并提高了史蒂芬的答案，因为它可以让你的表，即使它没有足够的内容占用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 5

我优化的透明边界的解决方案，因此它已没有更多的斜切内边界。

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 6

下面是一个简单和干净的解决方案。

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/