Customizing TiddlyWiki tables

[Craig in Calgary]

Is it possible to define a CSS class that can be applied to a table
that:
* sets explicit heights for thead and tfoot?
* can set a specific height for a specific body row?
* can set a specific width for the entire table?
* sets explicit widths for each column?
* apply a specific font-family definition to a specific row, specific
column, alternating rows, alternating columns?

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.

Any suggestions would be appreciated. Thank you.

Craig

[axs]

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

[Craig in Calgary]

AXS,

Not only does this get me on the right track, it's just what I needed
to finish 1st by several lengths! Thank you very, very much for taking
the time to demonstrate and document so clearly. You are yet another
reason this community is so very awesome! Thank you again.

Craig

[Paul]

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

[Paul]

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 tiddl...@googlegroups.com.
To unsubscribe from this group, send email to tiddlywiki+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/tiddlywiki?hl=en.

[axs]

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;

}