为什么填充和显示CSS属性适用于Chrome中的tr元素？

我昨天发贴this question。为什么填充和显示CSS属性适用于Chrome中的tr元素？

我的padding和display CSS属性在IE中的tr元素上没有生效。我认为这是一个IE错误，但这是我可怕的标记，这是应该责备。

很多人指出padding和display是tr元素的无效CSS属性。

为什么然后，他们在Chrome中工作？

如果我将下面的CSS放在tr元素上，CSS就会生效。

tr{ 
     display: block; 
     padding: 10px; 
     }

这是一个Chrome的bug，或者浏览器是否最好理解可写的CSS？

来源

2015-02-11 Daft

的display属性可以被应用到tr，但为了使tr表现得像个它需要display: table-row表行。更改显示值将阻止其按预期工作，并导致表格布局产生意外（但consistent）副作用。也就是说，将在表格中的元素周围创建一个匿名表格行（和单元格），并且该元素本身的布局也不同。

padding属性的确不适用于表行;你可以在definition given by the spec看到：

适用于：除了表行组，表头组，表尾组，表行，表列组和所有元素表列

但是，你在这里做的是将tr变成一个块框，这显然支持填充，这就是Chrome如何能够呈现这两个属性。如果您没有更改它的display，那么填充不适用。如果是这样，那么那将是一个错误。

如果IE无法将该元素渲染为块框，那么这也可能是一个错误，这可能是由于匿名表对象的实现较差。

来源

2015-02-11 11:42:17 BoltClock

-1

你不能风格的TR本身，而是你可以给一个TD在TR标志内部的风格，就像这样：

tr td {padding-top: 10px; padding-bottom:10px}

然后，你可以这样做：

tr td:first-child { 
padding-left: 10px; 
} 

tr td:last-child { 
padding-right: 10px; 
}

来源

2015-02-11 11:35:56

考虑到你链接的问题，它的真实如接受的答案所示

这不仅是IE 8+的问题，但它不会在任何浏览器中工作。

表格行中不能有填充。相反，您需要在您的td中添加填充样式。

而且我看不到你在代码中追加任何td，所以我可以修改它。

因此，确保将填充样式放在您的td而不是tr中。

只需确保将td放入您的tr中，然后执行其他操作，如边框以及任何您想要的边框。

现在写在这个问题，你的TR，即：

tr{ 
     display: block; 
     padding: 10px; 
    }

不再是一个table-row，因为它显示为使用css块（这是可能与显示属性），因此必须能够具有填充，所以没有问题

来源

2015-02-11 11:36:25

所以'display：block'渲染'tr'不再是'tr'？我不知道。很有意思！ – Daft 2015-02-11 11:38:55

很高兴你现在知道:) – 2015-02-11 11:39:42

为什么填充和显示CSS属性适用于Chrome中的tr元素？

回答

相关问题