如何从斑马条纹中删除边界间距

Question

我的桌子有边框间距和斑马条纹。但是当边界间距和斑马条纹结合在一起时，这种组合会导致列之间的间隙而不是光滑的条纹。例如，在下表中，Peach和Yes之间存在难看的差距。

如何保持边框间距，但删除斑马条纹中的间隙？

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

CSS：

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

Answer 1

使用填充而不是border-spacing。

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

这样您只需设置上/下填充，而不是左/右。

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

Answer 2

这个怎么样？ Updated JSFiddle

table {
    border-collapse:collapse;
}

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

在表格单元格上设置padding，并在表格上使用border-collapse:collapse以删除额外的边框。

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/