Html CSS 和嵌套表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7940196/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS and Nested tables
提问by codingJoe
I have html table that contains multiple other tables. My problem is that the inner tables inherit the same rules as the outer table.
我有包含多个其他表的 html 表。我的问题是内部表继承了与外部表相同的规则。
Is there a way to over ride the rules of the outer table? I basically want to tell the inner table:
有没有办法超越外桌的规则？我基本上想告诉内表：
Hey inner table Your name is "X". I want you to forget all about your outer table and its rules. I want you to follow these other specific rules.
嘿内表你的名字是“X”。我希望你忘记所有关于你的外桌和它的规则。我希望您遵守这些其他特定规则。
IS there a way to make that happen in HTML/CSS? Examples?
有没有办法在 HTML/CSS 中实现这一点？例子？
回答by Niet the Dark Absol
table.something > thead > tr > td,
table.something > tbody > tr > td,
table.something > tfoot > tr > td,
table.something > tr > td {
...
}
This will ensure that only direct children of the selected table, and not of nested tables, will receive the styles.
这将确保只有所选表的直接子项而不是嵌套表的直接子项才会接收样式。
回答by Dave
I'll assume you have the following
我假设你有以下内容
HTML
HTML
<table class="outer-table">
<tr>
<td>
<table class="inner-table">
<tr>
<td>
I'm some content!
</td>
</tr>
</table>
</td>
</tr>
</table>
CSS - Without class/ID
CSS - 没有类/ID
table { border: 1px solid black; }
table tr td table { border: 1px solid green; }
Sometimes you can get away with:
有时你可以逃脱：
table { border: 1px solid black; }
table table { border: 1px solid green; }
CSS - With Class/ID
CSS - 带有类/ID
A little note with Classes and IDs. Classes are something that can be applied to as many elements as you desire and carry the styling specified. IDs should only be used for one element, as this is an identification to that element. That means if you have two nested tables, you need to give that second table a new unique ID.
关于类和 ID 的一点说明。类可以应用于任意数量的元素，并带有指定的样式。ID 只能用于一个元素，因为这是该元素的标识。这意味着如果您有两个嵌套表，则需要为第二个表提供一个新的唯一 ID。
ID's are shown as # in CSS. So if you just want to use it for the specific ID, it will be:
ID 在 CSS 中显示为 #。因此，如果您只想将其用于特定 ID，它将是：
#outer-table { /* Outer table Style */ }
#inner-table { /* Inner table Style */ }
Using the class (as the example shows) in CSS, is a period. If you use the period without specifying the element, it will be used for all elements that have a class of the same name, so it's best to specify what element you want it attached to.
在 CSS 中使用类（如示例所示）是一个句点。如果您在不指定元素的情况下使用句点，它将用于具有相同名称的类的所有元素，因此最好指定您希望它附加到哪个元素。
table.outer-table { /* Outer table Style */ }
table.inner-table { /* Inner table Style */ }
回答by jimminySnippet
The easiest way is class and id. Be sure to use the element.
最简单的方法是 class 和 id。请务必使用该元素。
table.outter { some: style; } /* class */
table#inner { some: style; } /* id */
You can also use
你也可以使用
table { some: style; }
table table { some: style; } /* override outter table */
or combine the two
或将两者结合
table.outter { some: style; } /* class */
table.outter table#inner { some: style; } /* id */
Hope this helps.
希望这可以帮助。
