Css Stylesheet for table: Background-color for only specific cells

Surya

unread,

Dec 12, 2018, 4:01:42 PM12/12/18

to TiddlyWiki

Hello TW-friends,

again I have a problem. Searching for a solution and experimenting with it for the whole day without success...

I have a table build with the formula plugin (https://evanbalster.com/tiddlywiki/formulas.html).

I managed to give some rows and some columns specific background-colors & other formattings with this for example:

.my-table td:nth-child(4) {
  background-color:#ff944d;font-weight:bold;
}

But now I need to give only some specific cells another background-color.

it should look similar like this:

How can I do it in the stylesheet?

Thanks again for your always nice help!

Surya

unread,

Dec 14, 2018, 7:39:01 PM12/14/18

to TiddlyWiki

Please can anybody help me with this??

I really need that for the visitors of my page.

With the coloured cells they will automatically know, where they should edit a value, and where not. And where is what kind of result.

I tried to do that only with coloured rows & columns, but it looks really weird and confusing.

TonyM

unread,

Dec 15, 2018, 12:06:22 AM12/15/18

to TiddlyWiki

Suyra

You could wrap the contents of a cell in

@@.class contents@@ define class in a stylesheet tiddler.

Personaly I use html tables with a list widget to generate rows, and within that a list to generate columns/cells. Then this allows me to change styles with some logic where I need it.

I hope this leads to a solution.

Tony

Mohammad

unread,

Dec 15, 2018, 3:20:49 AM12/15/18

to TiddlyWiki

Hi Surya!

Take a look at

Shiraz plugin

There are ready to use colorful tables and you can see how classes is developed to apply colors to cells.

Good luck

Ton Gerner

unread,

Dec 15, 2018, 9:39:23 AM12/15/18

to TiddlyWiki

Hi Surya,

Have a look at https://tobibeer.github.io/tb5/#Formatting%20Table%20Cells

Cheers,

Ton

Surya

unread,

Dec 16, 2018, 2:16:39 PM12/16/18

to tiddl...@googlegroups.com

Hi Tony, Mohammad & Ton,

sorry for my late answer...

I think, I mean a different thing.

I don't have a "normal" static table like

|head1|head2|head3|

|cell1|cell2|cell3|

But I generated a table with the formula plugin (https://evanbalster.com/tiddlywiki/formulas.html).

The table-tiddler is:

\define formulaFixed() 2
\define ss_cols() A B C D E F G H I J
\define ss_rows() 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
\define ss_cell() $(c)$$(r)$

<$tiddler tiddler="Spreadsheet/Data My table">

<table class="my-table">

<$vars popupState=<<qualify "$:/temp/spreadsheet/pop">> popupCell=<<qualify "$:/temp/spreadsheet/popcell">> >

<$reveal type="popup" state=<<popupState>> >
<div class="tc-drop-down tc-popup-keep">

<$set name="cell" filter="[title<popupCell>get[text]]">
''<<cell>>'': <$edit-text tag=input index=<<cell>> size=150 />
<$button class="tc-btn-invisible">{{$:/core/images/save-button}}<$action-setfield $tiddler=<<popupState>> text=""/></$button>
</$set>

</div>
</$reveal>

<table>
<tr><th></th><$list variable=c filter=<<ss_cols>> ><th><<c>></th></$list></tr>
<$list variable=r filter=<<ss_rows>> >
<tr>
    <th style="padding:0;"><<r>></th>
    <$list variable=c filter=<<ss_cols>> ><td style="padding:0;">
        <$button popup=<<popupState>> style="width:100%;margin:0;padding:6px;display:block;background:none;border:none;cursor:pointer;"><$action-setfield $tiddler=<<popupCell>> text=<<ss_cell>>/> <$formula formula=<<ss_cell>>/>
        </$button>
    </td>
    </$list>
</tr>
</$list>
</table>

</$vars>

<!-- <table>
<tr><th></th><$list variable=c filter=<<ss_cols>> ><th><<c>></th></$list></tr>
<$list variable=r filter=<<ss_rows>> >
<tr><th><<r>></th><$list variable=c filter=<<ss_cols>> ><td><$edit-text tag=input index=<<ss_cell>> size=10/></td></$list></tr>
</$list>
</table> -->

</table></$tiddler>

It is styled with a Stylesheet-tiddler like this (only a little bit of the stylesheet-tiddler copied, just to show how):

.my-table th:nth-child(11),
.rezepterechner-table td:nth-child(1) {
  background-color:white;font-size:0.5em;
}

.my-table td:nth-child(3) {
  background-color:#ffa366;
}

.my-table tr:nth-child(1) {
  font-weight:bold;
}

Now it looks like (a screenshot is -because of a lot of rows- too big I think and in german, so I show it like this and just as an example):

But it should look like this:

Do you understand, what I mean??

Any help??? Pleeeaaase... :-)

Surya

TonyM

unread,

Dec 17, 2018, 10:54:45 PM12/17/18

to TiddlyWiki

Surya,

Could it be because however you style an individual cell the nth column styling is done after that?

or

Should background:none be background-color:none as in the stylesheet tiddler?

Otherwise, I can't follow the full operation. And do not have the test platform.

I hope these suggestions help

Tony

Surya

unread,

Dec 20, 2018, 2:46:27 PM12/20/18

to TiddlyWiki

Hi,

it seemed to me, that the styling of the columns overwrite the styling of the rows. And it seemed to be, that it doesn't matter, which styling is done first.

But I found now another solution for my calculation-in-a-table - wish.

I made it now without a table with <calc>. I made it in a way, that it looks a little bit similar like a table.

And with <calc> it is much better for me. Visitors can edit the values much more easier, it looks better and the tiddler itself is much smaller than with the formula-plugin.

Nevertheless, thanks for your suggestions and that you thought about my problem! And now I know, that even the TW-experts do not know how to solve the colour-problem in the formula-plugin...

Now I just have a small -not so important- problem with the <calc>. But for that I open a new thread.

Thanks, Surya

Reply all

Reply to author

Forward