如何从斑马条纹中删除边框间距答案

【问题标题】：how to remove border-spacing gaps from zebra stripes如何从斑马条纹中删除边框间距
【发布时间】：2013-07-16 01:56:48
【问题描述】：

我有一张同时具有边框间距和斑马条纹的表格。但是，当结合使用边框间距和斑马条纹时，这种结合会导致列之间出现间隙，而不是平滑条纹。例如，在下表中，Peach 和 Yes 之间存在难看的差距。

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

CSS：

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

【问题讨论】：

【解决方案1】：

这个怎么样？ Updated JSFiddle

table {
    border-collapse:collapse;
}

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

在表格单元格上设置padding，并在表格本身上使用border-collapse:collapse 来去除多余的边框。

【讨论】：

【解决方案2】：

使用填充而不是border-spacing。

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

这样你只设置顶部/底部填充，而不是左/右。

【讨论】：

【解决方案3】：

不要将border-spacing: 15px; 添加到table，将间距添加到td 或tr

【讨论】：

【解决方案4】：

在 td 中添加间距：

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

【讨论】：