HTML中的表格間距

Question

由於任何原因，我在兩個TD單元之間有一個小的間隙（線條不接觸）。 那邊沒有填充或邊距......我做了這個崩潰的想法。

爲什麼在那裏？ http://jsfiddle.net/CKy6U/

我的HTML：

<table> 
    <tr> 
     <td> 
      TEST CELL 1 
     </td> 
     <td> 
      TEST CELL 2 
     </td> 
    </tr> 
</table> 

我的CSS：

table 
{ 
    width: 100%; 
} 
tr 
{ 
    border-bottom: 1px solid Black; 
} 

td 
{ 
    border-collapse: separate; 
    border-spacing: 0px; 
    border-left: 1px solid Black; 
    border-bottom: 1px solid Black; 
    padding: 3px; 
    width: 50%; 
} 

我的結果：

Answer 1

添加邊框的摺疊表。

table 
{ 
width: 100%; 
border-collapse:collapse; 
} 

DEMO

Answer 2

你必須在你的HTML表中添加border-collapse: collapse在table或cellspacing="0"。

CSS

table { 
    width: 100%; 
    border-collapse: collapse; 
} 

fiddle

HTML：

<table cellspacing="0"> 

fiddle

兩種解決方案都應該工作。但是使用border-colapse原因是@Mooseman註釋cellspacing在html5中已過時。

Answer 3

將border-right: 0px;添加到並從td中刪除border-collapse: separate。將border-collapse: collapse添加到table。

小提琴：http://jsfiddle.net/CKy6U/7/

Answer 4

嘗試這樣的：LINK

CSS：

table { 
     width: 100%; 
     border-collapse:collapse; 
    } 

Answer 5

使用normalize.css或css reset 另外我想補充

<table cellspacing="0" cellpadding="0"> ... </table> 

Answer 6

在td取出border-collapse，並把它添加到table

table{ 
    width: 100%; 
    border-collapse: collapse; 
} 

tr{ 
    border-bottom: 1px solid black; 
} 

td{ 
    border-spacing: 0px; 
    border-left: 1px solid black; 
    border-bottom: 1px solid black; 
    padding: 3px; 
    width: 50%; 
}