如何從斑馬條紋中刪除邊框間距間隙

Question

我有一張桌面，它具有邊框間距和斑馬條紋。但是，當邊界間距和斑馬條紋相結合時，組合會導致列之間的間隙而不是平滑的條紋。例如，在下表中，Peach和Yes之間存在着難看的差距。

我如何才能讓邊框間距，但除去在斑馬線這些差距？

小提琴：http://jsfiddle.net/Bridgeland/xCBR9/

CSS：

table { 
    border-spacing: 15px; 
} 
tr:nth-child(even) { 
    background-color: #c4d8fd; 
} 

Answer 1

這個怎麼樣？ Updated JSFiddle

table { 
    border-collapse:collapse; 
} 

table td { padding:10px 0; } 
tr:nth-child(even) { 
    background-color: #c4d8fd; 
} 

坐落在表格單元格padding，並使用border-collapse:collapse對錶本身刪除多餘的邊界。

Answer 2

使用填充，而不是border-spacing。

td,th{ 
    padding: 10px 0px; 
} 

這樣你只能設置頂部/底部填充，而不是左/右。

http://jsfiddle.net/xCBR9/4/

Answer 3

不要在border-spacing: 15px;添加到table，間距增加td，或tr

如這裏http://jsfiddle.net/feitla/Rzsvm/

Answer 4

附加間距在TD：

table { 
border-spacing: 0px; 
} 
tr:nth-child(even) { 
    background-color: #c4d8fd; 
} 
td{ 
    padding:0 15px 0 15px; 
} 

http://jsfiddle.net/X8MfB/