html - 使用cellpadding的HTML表格替代行底纹

当将cellpadding="10"与替代行阴影一起使用时，替代行的背景似乎不会随着cellpadding的“扩展”。例如：



如您在上图中所看到的，背景与多余的单元格填充之间存在间隙。如何使背景覆盖整行，包括cellpadding？

这是其背后的HTML样式：

tr:nth-child(even) {background-color: #f2f2f2;}

最佳答案

它们可以，但是您必须从border-spacing中删除​​table，然后调整单元格填充和/或td和th元素的边距和填充。

默认情况下，表格在单元格之间具有间距，该间距不是单元格“内容”的一部分，而仅是表格的一部分。在table，td和th上添加边框以更好地理解它。有关更多信息，请更好地查看有关边框间距的MDN page。

没有单元填充的示例：

table {
    border-spacing: 0;
}
td, th {
    padding: 10px 20px;
}

关于html - 使用cellpadding的HTML表格替代行底纹，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57838260/