Can inline CSS apply to child elements nested in the styled element?
HtmlCssHtml Problem Overview
This is the problem in a nutshell:
- I want to apply the style
vertical-align: topto every<tr>in a table, without manually applying the style to every row. - I have to use inline CSS because I'm on a wiki, so I can't edit
the external style sheet, or edit the
<head>to embed a style. - When I add a style attribute to a
<table>tag, it appears this style is not passed on to its child elements. (I can see how this is nearly always a good thing.) - I can't use
<style><!--...--></style>, because that is not a permitted tag on MediaWiki pages.
Should I resign myself to adding style="vertical-align: top to every <tr>, or is still a solution I am overlooking?
EDIT: Removed a lump of background info, in order to limit the question to what the question title suggests it is about.
Html Solutions
Solution 1 - Html
> Can inline CSS apply to child elements nested in the styled element?
Not directly.
Indirectly, only if the child element has that-property: inherit set in its existing stylesheet.
Solution 2 - Html
I was interested in this question from a different context, specifically for styling html emails. Since css can't be added to the head of an email in gmail (believe it or not) the only way to consistently apply email styles is inline.
The answer to this question is no, there is no acceptable way to circumvent the problem in this or any other context that I'm aware of. When approaching a problem like this it is helpful to think about whether the style that you are trying to apply should be an "exception" or a "rule", i.e. if 90% of your tds are vertically-aligned top, you should just apply the style as a rule and go through and correct the 10%. When doing this it's important that you clearly specify your exceptions, preferably with a comment block that references the "rule".
For full reference on what css is supported and where this is very helpful: http://www.campaignmonitor.com/css/
Solution 3 - Html
Im not familiar with Wiki's but can you create a class and apply a style to all child nodes in that class?
So ...
<style type="text/CSS"><!-- SomeClass tr { vertical-align: top } --></style>
<table class="SomeClass">
</table>
Worth a try?
Solution 4 - Html
Use following :
<style type="text/css">
table tr td {
vertical-align:top;
}
</style>