blocks|key|2302595|text|您不能为TR本身设置样式，但是可以将TR标记内的TD标记为样式，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2302596|tr+td+{padding-top:+10px;+padding-bottom:10px}|code-block|syntax|javascript|2302597|然后，你可以：|2302598|tr+td:first-child+{
+padding-left:+10px;
}

tr+td:last-child+{
+padding-right:+10px;
}|2302599|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

You can't style the TR themselves, but you can give to a TD inside a TR mark a style, like this :

<pre><code>tr td {padding-top: 10px; padding-bottom:10px}
</code></pre>

Then, you can do :

<pre><code>tr td:first-child {
 padding-left: 10px;
}

tr td:last-child {
 padding-right: 10px;
}
</code></pre>

blocks|key|2302601|text|考虑到你所联系的问题，正如被接受的答案所说的那样|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2302602|这不仅是IE+8%2B问题，而且在任何浏览器中都不能工作。
不能在表行中填充。相反，您需要在td中添加填充样式。
我看不出您在代码中添加了任何td，所以我可以修改它。
因此，确保将填充样式放在td中而不是tr中。
只要确保把td放在你的tr中，然后做其他的事情，比如边框和任何你想要做的事情。|blockquote|2302603|现在，正如在这个问题中所写的，你，也就是：|2302604|tr{+
++++++++display:+block;
++++++++padding:+10px;
++++}|code-block|syntax|javascript|2302605|不再是table-row，因为它是使用css作为块显示的(这在display属性中是可能的)，因此必须能够填充，所以没有问题。|offset|length|style|CODE|2302606|entityMap^0|0|0|0|0|3|9|J|3|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$]]|$1|E|3|F|5|6|7|V|8|@]|9|@]|A|$]]|$1|G|3|H|5|I|7|W|8|@]|9|@]|A|$J|K]]|$1|L|3|M|5|6|7|X|8|@$N|Y|O|Z|P|Q]|$N|10|O|11|P|Q]]|9|@]|A|$]]|$1|R|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|S|$]]

Considering the question you linked, Its true as said by the accepted answer

<blockquote>
 This is not only IE 8+ issue but it won't work in any browser.
 
 You can't have padding in table rows. Instead you need to add the
 padding styles in your td.
 
 And I can't see that you're appending any td in your code so I could
 modify that.
 
 Thus, ensure to put padding styles in your td instead of tr.
 
 And just be ensure to put td in your tr and do the rest things like
 border and anything you want on it.
</blockquote>

Now as written in this question, you tr, i.e:

<pre><code>tr{ 
 display: block;
 padding: 10px;
 }
</code></pre>

is no more a <code>table-row</code>, since it is displayed as a block using <code>css</code>(and this is possible with the display property), and thus must be able to have padding, so there is no issue

blocks|key|2302642|text|display属性可以应用于tr，但是为了使tr的行为像表行一样，它需要是display:+table-row。更改显示值将阻止其按预期工作，并对表布局造成意外(但一致的)的副作用。也就是说，将在表中的元素周围创建一个匿名表行(和单元格)，并且元素本身将被不同的布局。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2302643|padding属性确实不适用于表行；您可以在规范给出的定义中看到这一点|2302644|适用于:除表行组、表头组、表页脚组、表行、表列组和表列外的所有元素。|blockquote|2302645|然而，您在这里所做的是将tr变成一个块框，这显然支持填充，这就是Chrome能够呈现这两个属性的方式。如果没有更改其display，则不应应用填充。如果是的话，那就会是个窃听器。|2302646|如果IE不能将元素呈现为块框，那么这可能也是一个错误，原因可能是匿名表对象的实现不佳。|2302647|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes|1|http://www.w3.org/TR/CSS21/box.html#padding-properties^0|0|7|E|2|M|2|11|I|2A|3|0|0|0|7|M|7|1|0|0|C|2|1M|7|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@$9|17|A|18|1|19]]|E|$]]|$1|F|3|G|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@$9|1D|A|1E|1|1F]]|E|$]]|$1|H|3|I|5|J|7|1G|8|@]|D|@]|E|$]]|$1|K|3|L|5|6|7|1H|8|@$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|1M|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]|W|$5|R|S|T|E|$U|X]]]]

The <code>display</code> property can be applied to a <code>tr</code>, but in order for a <code>tr</code> to behave like a table row it needs to be <code>display: table-row</code>. Changing the display value will prevent it from working as expected and cause unintended (but <a href="http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes" rel="nofollow">consistent</a>) side effects to the table layout. Namely, an anonymous table row (and cell) will be created around the element within the table, and the element itself will be laid out differently.

The <code>padding</code> property indeed does not apply to table rows; you can see this in the <a href="http://www.w3.org/TR/CSS21/box.html#padding-properties" rel="nofollow">definition given by the spec</a>:

<blockquote>
 Applies to: all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
</blockquote>

However, what you're doing here is turning the <code>tr</code> into a block box, which obviously supports padding, and that is how Chrome is able to render both properties. If you did not change its <code>display</code>, then the padding should not apply. If it did, then that would be a bug.

If IE fails to render the element as a block box, then that is likely a bug too, owing perhaps to poor implementation of anonymous table objects.

I posted <a href="https://stackoverflow.com/questions/28431007/css-border-and-padding-not-working-in-ie-8-9">this question</a> yesterday.

My <code>padding</code> and <code>display</code> CSS attributes were not taking effect on a <code>tr</code> element in IE. I thought it was an IE bug but it was my terrible mark up which was to blame. 

Many people pointed out that <code>padding</code> and <code>display</code> are invalid CSS attributes for <code>tr</code> elements.

Why then, do they work in Chrome?

If I put the follwoing CSS on a <code>tr</code> element, the CSS takes effect.

<pre><code> tr{ 
 display: block;
 padding: 10px;
 }
</code></pre>

Is this a bug with Chrome or perhaps is the browser doing it's best to make sense of terribly written CSS?

Why do padding and display CSS attributes work on tr elements in Chrome?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我昨天发了。我的padding和display CSS属性没有在IE中的tr元素上生效。我原以为是IE的错误，但这是我的可怕标记，这是罪魁祸首。许多人指出，padding和display是tr元素的无效CSS属性。那么，它们为什么在Chrome中工作呢？如果我将折叠CSS放在tr元素上，CSS就会生效。    tr{ ...

问为什么填充和显示CSS属性在Chrome中的tr元素上工作？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么填充和显示CSS属性在Chrome中的tr元素上工作？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么填充和显示CSS属性在Chrome中的tr元素上工作？
EN