html - 为什么 cellpacing 和 cellpadding 不是 CSS 样式

Question

我不知道为什么这让我如此困扰，但是当我创建网站时，我总是尝试使用 CSS 来完成我的所有样式设置。然而，当我使用表格时，我必须记住的一件事是添加 cellspacing="0" 和 cellpadding="0"

为什么没有 CSS 属性来覆盖这些过时的 HTML 4 属性？

Answer 1

单元格间距：

table { border-collapse: collapse; }

至于cellpadding，你可以做

table tr td, table tr th { padding: 0; }

Answer 2

垫子已经回答了，但只是为了完整性：

• padding→cellpadding
• border-spacing→cellspacing
• border-collapse→ 没有 HTML 等价物

还值得记住的是，您可以为 CSS 设置单独的水平和垂直值，例如border-spacing: 0 1px.

Answer 3

Eric Myer 的重置样式表包含以下表格的“重置”样式：

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

另外 TD, TR 被重置：

thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

我提到这一点的原因是他有一个评论'tables still need cellpadding=0'。我想他把它放在这里是有原因的——可能是一些旧浏览器需要的。从这是他所包含的极少数评论之一这一事实来看，我猜它很重要，并且有充分的理由。

基于此评论 - 仅此评论！- 我将继续在标记中使用 cellspacing="0" ，除非有人明确（如下）告诉我为什么我不需要。然而，在任何值得支持的现代浏览器中，这可能是不必要的。

Answer 4

table { border-collapse:collapse; }

Answer 5

我猜有人认为单元格间距是“不好的做法”。我如何理解它等同于包含在 CSS2 标准中，但 IE 不支持此属性。border-collapse 允许将间距设置为 0 值。单元格填充可以通过将填充属性设置为表格的 TD 元素来实现。

Answer 6

遗憾的是，单元格不能从行 (tr) 的 CSS 属性继承其默认填充，否则如果不是“初始”，则从行组 (thead/tbdy/tfoot) 继承，如果不是“初始”，则从 colgroup 或整个桌子。

“cellspacing”没有这个问题（但实际上它们是单元格周围的边距，这些外边距与相邻单元格的边距以及表格/行组或行的内部填充一起折叠，它们被表格的填充“背景”设置（表格背景还包括表格的“边框”，该边框绘制在其顶部，并且还将此背景剪辑到表格边框的外边缘，特别是当此边框具有圆角时）。

但是对于单元格填充，将“单元格填充：n”定义为表格或组属性会更简单，而不是在每个单元格上单独并明确地使用自己的“边框：n”样式（只有在我们需要覆盖某些特定单元格中的填充）。