applying custom styles to a table output as html or from the ForEach plugin

[ian]

I've not managed to find the syntax to allow the ForEach plugin to
create a table styled with a custom css class - i.e. override the
default .twtable class applied to TW tables.

I can apply inline styles e.g:
|bgcolor:#c6dbef;Age|Gender|

but not across the entire table e.g.:
{{mystyle{
|Age|Gender|
}}}

The inline styles approach will work, but it means I have to repeat a
lengthy style designation for each cell output in the table
(I included a single style call in the Name header row in the ForEach
below, to show what does work)

my ForEach call looks like:

<<forEachTiddler
where
'tiddler.tags.contains("animal_rescue")'
sortBy
'tiddler.title'
descending
write

'"|[["+tiddler.title+"]]<br><br>"+tiddler.data("Description")
+"|"+tiddler.data("Image")+"|"+tiddler.data("BreedType")
+"|"+tiddler.data("Age")+"|"+tiddler.data("Gender")
+"|"+tiddler.data("Status")+"|\n"'
begin

'"|bgcolor:#c6dbef;Name|Image|Type|Age|Gender|Classification|h\n"'
>>

Additionally, if I just create a regular tiddler with the styled table
e.g.:
{{mystyle{
|Age|Gender|
}}}

the style is applied when the table is viewed in the Tiddlywiki, but
when I publish the html, I end up with this:

<div class="mystyle"><table class="twtable"><tbody><tr
class="evenRow"><td>Age</td></tr>.......
now the the twtable class seems to have precedence over the mystyle
class

So, in both cases I have been unable to get my table styled properly
(static tiddler output as html - or dynamic with ForEach)

If anyone has any pointers they would be much appreciated .

Thanks!
ian

[FND]

> I've not managed to find the syntax to allow the ForEach plugin to
> create a table styled with a custom css class

Take a look here:
http://www.tiddlywiki.org/wiki/Tables#Custom_CSS_Classes

So you can do this:
|myTable|k
|!Name|!Description|h
|foo|lorem ipsum|
|bar|dolor sit amet|

The CSS selector looks like this:
.viewer table.myTable" {
...
}

HTH.

-- F.

[ian]

Wonderful - that fixed both problems. Thanks FND!

For anyone that stumbles on to this post, here's the ForEach syntax I
used to make it work (it took me a few minutes to realize I needed a
newline /n):
this:
'"|Name|Image|Type|Age|Gender|Classification|h\n"'
was changed to this
"|foo|k\n|Name|Image|Type|Age|Gender|Classification|h\n"'

with this class added to the stylesheet:
.viewer table.foo {color: #ccc;}

ian