Thanks that worked perfectly. I had thought of doing it that way. But, mistakenly thought I had to build the table between <html> and </html> as well. But I played with your example and I see it is enough just to define it above the tiddly markup and everything works fine.

Paul

On 5/20/2011 5:10 PM, axs wrote:
Hi there, Paul,

I just saw this Q today, so I apologize for the delay.

The reason some of these things didn't work for you is because: if you place a style definition in one table cell, then the style applies only to that cell. This automatically means that global table styles (such as those that use nth-child notation) are not propagated to the other cells.

This is what I would do: To define inline CSS classes in a tiddler, just wrap the class definition in <style> tags which are then wrapped inside <html> tags. For example, taking some of the definitions I have above, you could just do the following in the beginning of your tiddler:

<html><style>
.customTable tr:hover{
background-color:pink;
color: purple;
}

.customTable tr td:hover{
text-align: center;
font-size:40px;
}
</style></html>

Then include the content that uses the class somewhere *below* it. Everything inside the <html><style> elements will not be rendered (as long as it's written properly!). If you try to write inline CSS rules, things get messy quickly, as you've seen. In general, it is good practice to separate content from styling, and using CSS classes in the manner I've outlined above is the cleanest way I can think of for what you're asking. This way, when you wish to change a table's styling, you don't have to edit each inline style you've defined; you just have to edit your style definitions that are located at the top of the tiddler.

Of course, it is still appropriate to define inline styles for elements that are singularly distinct from the other elements and you wish to make them stand out. In such case, don't try to target that one element (here, one table cell) from the class definition. Just do it inline.

Finally, if you use this approach, use unique class names for each unique style, so that nothing clashes and you don't get unexpected behavior. This is important as you will cause yourself endless headaches if you have different style classes with the same names throughout your TW. A suggestion: perhaps you could use the tiddler's title as part of the class name (e.g. .customTable_tiddler_title).

Hope this helps.

Regards,
axs

--
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To post to this group, send email to tiddlywiki@googlegroups.com.
To unsubscribe from this group, send email to 
tiddlywiki+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/tiddlywiki?hl=en.

--
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To post to this group, send email to tiddlywiki@googlegroups.com.
To unsubscribe from this group, send email to 
tiddlywiki+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/tiddlywiki?hl=en.

Reply via email to