Alex,
I loved your examples using CSS class to control the way a table is
rendered. I have several tiddlers that I keep on hand to help remind
me how to write in TiddlyWiki. As my help files have grown, and
wanting to have them in all of my TiddlyWiki's, I usually use
Borkowski's IncludePlugin to keep my help files centralized and
everything nice and ... smaller.
However, putting the CSS class in a tiddly to be included doesn't seem
seem to get it recognized. So I was wondering if these custom classes
could be rewritten to apply the properties inline?
I see that the markup is of the form;
@@CssProperty:value;CssProperty:value; ...Stuff@@
But I'm unable to figure out how to convert anything but your simplest
CSS class;
|@@line-height:40px;one@@|two|three|four|five|six|seven|eight|nine|ten|
h
|1|2|3|4|5|6|7|8|9|10|
|1|2|3|4|5|6|7|8|9|10|
|1|2|3|4|5|6|7|8|9|10|
|1|2|3|4|5|6|7|8|9|10|
|1|2|3|4|5|6|7|8|9|10|
|1|2|3|4|5|6|7|8|9|10|
|1|2|3|4|5|6|7|8|9|10|f
I know this defeats the beauty of your examples, but there are times
when I only want one table to look different or want to include the
files.
Any help would be appreciated.
Paul
On Apr 30, 2:58 am, axs <[email protected]> wrote:
> Hi Craig,
>
> Try adding the following definitions to your stylesheet one by one (if you
> have an updated browser....and it's not IE), and the following table to
> test:
>
> |customTable|k
> |one|two|three|four|five|six|seven|eight|nine|ten|h
> |1|2|3|4|5|6|7|8|9|10|
> |1|2|3|4|5|6|7|8|9|10|
> |1|2|3|4|5|6|7|8|9|10|
> |1|2|3|4|5|6|7|8|9|10|
> |1|2|3|4|5|6|7|8|9|10|
> |1|2|3|4|5|6|7|8|9|10|
> |1|2|3|4|5|6|7|8|9|10|f
>
> --------------------------------------------------------------------------------------------------------------------
> Is it possible to define a CSS class that can be applied to a table
> that:
>
> * sets explicit heights for thead and tfoot?
>
> .customTable thead{
> line-height:40px;}
>
> .customTable tfoot{
> line-height:100px;}
>
> --------------------------------------------------------------------------------------------------------------------
>
> * can set a specific height for a specific body row?
>
> .customTable tr:nth-child(3){
> line-height:100px;
>
> }
>
> * can set a specific width for the entire table?
>
> .customTable{
> width:100%;
>
> }
>
> .customTable{
> width:700px;}
>
> --------------------------------------------------------------------------------------------------------------------
> * sets explicit widths for each column?
>
> all columns:
> .customTable tr td {
> width: 20px;
>
> }
>
> the second column:
> .customTable tr td:nth-child(2){
> width:60px;}
>
> --------------------------------------------------------------------------------------------------------------------
> * apply a specific font-family definition to a specific row, specific
> column, alternating rows, alternating columns?
>
> even rows:
> .customTable tr:nth-child(even){
> font-family:cursive;
> color:red;
>
> }
>
> odd rows:
> .customTable tr:nth-child(odd){
> background-color:orange;
> font-family:fantasy;
>
> }
>
> every other column AFTER the 3rd column
> .customTable tr td:nth-child(2n+3){
> font-family:georgia;
> font-weight:bold;
> font-size:20px;
>
> }
>
> --------------------------------------------------------------------------------------------------------------------
> and here are some for fun:
>
> .customTable tr:hover{
> background-color:pink;
> color: purple;
>
> }
>
> .customTable tr td:hover{
> text-align: center;
> font-size:40px;
>
> }
>
> --------------------------------------------------------------------------------------------------------------------
>
> I create some tables that tend to be too wide. What would render best
> for me is to be able to set the width and font-size for certain
> columns.
>
> You can target specific rows and columns with the :nth-child selector which
> has as parameters something like xn+y. The basic usage is this: the style
> definition will be applied to every x-th child, beginning with the y-th
> child. So .customTable tr td:nth-child(5n+2) will target every 5th td (table
> cell) of every tr (table row) , beginning with the 2nd td of that tr.
>
> Keep in mind that Cascading Style Sheets CASCADE. So, some definitions may
> clash and in this case the last one takes precedence. For example, if you
> had just pasted all of those definitions that I gave above into your
> stylesheet, the second width definition would overrule the first, and your
> table would be 700px wide instead of filling the parent container (100%
> width). BUT then we get to the .customTable tr td line that will override
> each table cell's width and set it to 20px, effectively undoing BOTH of the
> previous table width definitions. And then the .customTable tr
> td:nth-child(2) definition would overrule the previous width definition and
> make every 2nd table cell of every row (basically the 2nd column) 60px wide.
> If this order of definitions was reversed, the table may look much
> different.
>
> Hope this gets you on the right track.
>
> regards,
> axs
--
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.
