Table cell colors do not span cell width

[John Thornton]

I would like the brown background color to span the whole cell, but the only area of brown background is under the characters, not any of the white-space on either side. Is there a way to accomplish that?

|>| @@background-color:brown;color:white;font-size:150%; Brimstone@@ |
|>| {{Brimstone Image External}} |
|>| //Foul smelling yellow crystals used in dark rituals// |
|Type | Ingredient |

Any help is appreciated. Thank you. (First time user, be gentle)

[Birthe C]

You might get and idea http://tobibeer.github.io/tb5/#Formatting%20Table%20Cells

[Ton Gerner]

Hi John,

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

Cheers,

Ton

[John Thornton]

Thanks. You provided two very useful pieces of info. One, it isn't in TiddlyWiki at this point and, two, a solution. I tried and it it worked as expected. I will probably apply the principle to other stumbling blocks I may run into.

Many thanks!

[PMario]

Hi John,

Have a closer look here: https://tiddlywiki.com/#Tables%20in%20WikiText

use this:

|myClass|k
|>| Brimstone |h

|>| {{Brimstone Image External}} |
|>| //Foul smelling yellow crystals used in dark rituals// |
|Type | Ingredient |

Create a new tiddler eg: myTableStyles

tag it: $:/tags/Stylesheet

add this text

.myClass thead td {

  background-color:brown;
  color:white;
  font-size:150%;
}

Save -> done!

have fun!

mario

[John Thornton]

Thank you. I will be using the color change technique on other rows that are not header rows, so the earlier solution will be fine for that, also. Your update is very useful because I was aware of the 'h' thingy to add after a line to make a header line. I could not figure out, however, what the connctions to the actual CSS element selector I needed to override. I tried a couple without success and resorted to help. Looking at it, it is very logical and one would figure I could have got there. Oh well.

Thanks

[John Thornton]

Birthe C, I notice with the <div> solution there are small but noticeable pieces of white-space (default color) on either end of the line inside the cell. I imagine these are from margins or some such. Is there a way to make them go away with some setting for div or within the div class?

|itemName|k
| Created from the following Recipe(s) |<|<|<|h
| <div class="craftingTableName">Blacksmith's Bench</div> |<|<|<|
| @@background-color:#60c0e0;[[Blacksmith's Bench]]@@ |<|<|<|
|!Ingredients    |!Produces    | !Crafting Time | !XP Gained |
|Abysmal Eye (1) |Abysmal Daggers (1)     | ? |     ??? |
|Branch (5) |~|~|~|
|Iron Bar (10) |~|~|~|

|Thick Leather (5) |~|~|~|

CSS info

.center { display:block; text-align:center; }

.itemName thead td { background-color:brown; color:white; font-size:150%; }

.craftingTableName { background-color:green; color:yellow; font-size:130%; }

[John Thornton]

Actually, I think this is addressed in the post that Ton Gerner pointed me to, and I missed the additional adjustment to the CSS for the cell.