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.
