Rounded Corners on Tables

9 views
Skip to first unread message

IanO

unread,
Jan 14, 2008, 2:47:16 PM1/14/08
to TiddlyWiki
I had added -moz-border-radius: 1em; to my .tiddler item in my style
sheet and then my tiddlers had rounded corners.
So I said to myself, Why not rounded corners on tables?

So I added
Table{
border: thin solid; -moz-border-radius: 1em;
}

to my stylesheet tiddler and the results were mixed:
<<calendar thismonth>> did indeed have rounded corners.
However this table (from TWHelp):

|!one|!two|!three|!four|
| r1r2c1 |>| r1c2c3 |a|
|~|b|c|d|
|e|~|f|~|

did not display rounded corners nor did my table of reminders.
I am curious. when is a table not a table or are some tables more
equal than other tables?

IanO

FND

unread,
Jan 14, 2008, 3:30:50 PM1/14/08
to Tiddl...@googlegroups.com
> Why not rounded corners on tables?
> [...]
> the results were mixed

That's probably because of the border-collapse property*; this basically
means that the table's border is merged with the outer cells' borders.
Try this, for example:
.viewer table {
border: 2px solid #000;
border-collapse: separate;
border-spacing: 0;
-moz-border-radius: 5px;
}
Just for the record, the "-moz-border-radius" works only on Gecko-based
browsers (like Firefox).

HTH.


-- F.


* http://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse

Reply all
Reply to author
Forward
0 new messages