On May 16, 11:33 pm, Scott Simmons <[email protected]> wrote:
> Surely there's something obvious I'm missing -- but I'm having a devil of a
> time styling table rows with a custom class.
>
> What I'd like to do is added a bottom border to each table row, as an easy
> visual cue for the break between rows of data.
>
> My initial thought was to define a custom class in the StyleSheet, like so:
>
> .viewer .rowBreaks tr {
>   border-bottom:1px dotted [[ColorPalette::PrimaryMid]];}
>
> ... and invoke it in a tiddler thusly:
>
> |rowBreaks|k
> |some cell data|more cell data|
> |a second row|and some more data still|
>
> ... but that didn't get me anywhere, so I tried styling a few more elements:
>
> .viewer table .rowBreaks,
> .viewer table .rowBreaks tr,
> .viewer table .rowBreaks td,
> .viewer .rowBreaks tr,
> .viewer .rowBreaks td,
> .twtable .rowBreaks,
> .twtable .rowBreaks tr,
> .twtable .rowBreaks td {
>   those same styles from above;
>
> }
>
> ... thinking that would surely nail the element I needed my class to affect.
>
> But nope.
>
> Can anyone tell what I'm missing?

The reason is that TW already gives the .twtable tr and td border
style rules and your CSS doesn't override it because you only give it
a border-bottom rule.
There a few ways to rectify this. You could put this in your CSS
.viewer .rowBreaks tr {
    border: none;
    border-bottom:1px dotted [[ColorPalette::PrimaryMid]];
}

Or you could continue to style each edge individually
.viewer .rowBreaks tr {
    border-top: none;
    border-bottom:1px dotted [[ColorPalette::PrimaryMid]];
}

Or you could define each of the border style parts separately
.viewer .rowBreaks tr {
    border-width: 0 0 1px 0;
    border-style: none none dotted none;
    border-color: [[ColorPalette::PrimaryMid]];
}

Hope that helps

Colm

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

Reply via email to