html - 如何去除斑马条纹的边框间距

Question

我有一张同时具有边框间距和斑马条纹的表格。但是当 border-spacing 和 zebra striping 组合在一起时，组合会导致列之间的间隙而不是平滑的条纹。例如，在下表中，Peach 和 Yes 之间有一个难看的差距。

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

fiddle :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 来移除多余的边框。