html - 如何从斑马条纹中删除边框间距

Question

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

在此处输入图像描述

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

CSS：

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

score 1 · Accepted Answer

使用填充而不是border-spacing.

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

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

score 1 · Accepted Answer

table {
    border-collapse:collapse;
}

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

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

在 td 中添加间距：

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

4 回答 4