Shiraz Dynamic Table column formatting via style

#1

There is a way to use a style to format a Shiraz Dynamic table column centered or right?

Thanks.

#2

I found this;

Use table classes

Shiraz has several table classes can be used for dynamic tables see Table Classes. It is possible to create user customized CSS classes and pass them to table-dynamic macro.

#3

You may be specifically looking for column templates (so that a certain column always formats the corresponding field data in a certain way, without necessarily invoking different CSS for the whole table). If so, start here:

https://kookma.github.io/TW-Shiraz/#demo%2Fdynamic-tables-template

Mohammad may chime in if you get stuck along the way.

-Springer

#4

Hi @Marco10x15
The answer is given by Springer, you need to develop your own column template. But if you donot want to go through column template, a simple solution (NOT specific to Shiraz) is a CSS solution targets a specific column.

Example: I want to right alight and red color column 2

  1. go to Shiraz ( Shiraz 2.4.6 — create stylish contents in Tiddlywiki)
  2. Create a new tiddler and write the below example and save
<style>
.test-class tbody>tr>:nth-child(2){ 
/* your css here */
color:red;
text-align:right;
}
</style>

<<table-dynamic filter:"[tag[sample]]" fields:"title created modified" caption:"''Table 1. Dynamic table example''"  class:"tt w-75 table-center test-class" stateTiddler:"emp01">>
  • Change 2 in .test-class tbody>tr>:nth-child(2) to any column
  • Use your own CSS
#5

Thank you all, I will use this information.

1 Like
#6

This is a nice way to manipulate the columns, but I can’t find the solution to affect the width of that specific column.

I tried this;

.codecolumn 
tbody>tr>:nth-child(1){ 
color:red;
font-size:14px;
width:2%;
text-align:center;

}

but it doesn’t affect the width of the column, but font color, size and alignment are fine…would you have a hint ?

#7

use width:"200px" or something like that!

#8

I found the answer, tbody shall be used with thead…like this

.codecolumn 

thead>tr>:nth-child(1){ 
width:10%;
}
tbody>tr>:nth-child(1){ 
color:red;
font-size:20px;
text-align:center;
}