CSS：表格邊界水平分隔並垂直摺疊

Question

有什麼辦法可以應用到表格單元格的單獨和摺疊的邊框屬性都已摺疊但分開？由於

編輯：這是通緝的結果：

Answer 1

不，border-collapse不允許單獨定義水平和垂直。你可以用額外的標記（其中，在桌子上，最終可能會成爲額外的標記的很多）實現它，所以我不建議它，但我會給它的代碼：

HTML：

<table> 
    <tr> 
    <th><div>Header 1</div></th> 
    <th><div>Header 2</div></th> 
    </tr> 
    <tr> 
    <td><div>Content 1</div></td> 
    <td><div>Content 2</div></td> 
    </tr> 
    <tr> 
    <td><div>Content 3</div></td> 
    <td><div>Content 4</div></td> 
    </tr> 
</table> 

和CSS：

table {border-collapse: collapse;} 
th, td { border: 0; padding: 0;} 
th div, td div {margin: 5px 0 0; border: 1px solid #ff0000; padding: 5px;} 

當然，你可能要使用一個類上div或子選擇，只針對div如果某種方式您可能在table數據中有其他div。 margin控制您的水平間距，當然，您的padding或border寬度可以是任何你想要的。

Answer 2

這是你在找什麼？

table { 
    border: 1px solid black; 
} 

table td { 
    border: 1px solid red; 
    margin: 3px; 
} 

它不使用border-collapse屬性，但在其自己單獨的邊境各<td>創建一個外部表邊框。

Answer 3

我能得到的最接近的是：

table { 
    border-collapse: separate; 
    border-spacing: 4px 0; 
} 
table td, table th { 
    border: 1px solid black; 
} 

不幸的是，這將創建行之間的雙粗線。在border-spacing屬性中不允許使用負值，否則-1px可能會起作用。

---

你可以做其他線路2px的寬，如果這是可以接受的，那麼至少你不會有不同的邊框厚度：

table { 
    border-collapse: separate; 
    border-spacing: 4px 0; 
} 
table td, table th { 
    border-width: 1px 2px; 
    border-style: solid; 
    border-color: black; 
} 
table tr:first-child th, 
table tr:first-child td { 
    border-top-width: 2px; 
} 
table tr:last-child th, 
table tr:last-child td { 
    border-bottom-width: 2px; 
} 

Answer 4

也許

table { 
    border-spacing: 1px 0; 
} 

Answer 5

這可能是無需使用第td單元中的額外div元素。該解決方案適用於Chrome，Firefox和IE8 +。

CSS

table 
{ 
    border-collapse: separate; 
    border-spacing: 10px 0px; 
} 
td, th 
{ 
    padding: 10px; 
    border: 1px solid #000; 
    border-top: none; 
} 
table tr:first-child th 
{ 
    border-top: 1px solid #000; 
} 

變化表TR：第一胎次到表TR：第一胎TD如果表的第一行不包含表頭單元格（TH）。

見我的jsfiddle這裏：Table with column spacing but collapsed row border