僅限於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/