带有 cellpadding 的 HTML 表格替代行阴影

Question

当使用 cellpadding="10" 和交替行底纹时，交替行的背景似乎不会随着单元格填充而“扩展”。例如:

如上图所示，背景和额外的 cellpadding 之间存在间隙。如何让背景覆盖整个行，包括 cellpadding？

这是它背后的 HTML 样式:

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

Answer 1

他们有，但你必须删除 border-spacing来自 table然后调整 td 的单元格填充和/或边距和填充和 th元素。

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

没有单元格填充的示例:

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