Help to specify a table width greater them the tiddler text

#1

Hey guys,

I’m making some changes to my wiki and I’m having some problems. I’m using Tiddlywiki 5.3.3.

My screen was very large and I needed to fix the width of the tiddlers and the text used, for this I used the following code (extracted from Grok Tiddlywiki)

/* Limit line length to a traditionally-longish but readable value. */ 
div.tc-tiddler-body { 
  max-width: 40em; 
  margin: auto; 
	text-align: justify;
}

/* Allow the story river to get a good bit wider than the text since this gives useful space to the navbars and balances out any empty space more nicely, but not so long that it looks ridiculous. */ 
div.tc-tiddler-frame { 
  max-width: 60em;
  margin-left: auto;
  margin-right: auto; 
}

The results are exacly what i want, but I have some tables with pictures and I would like these tables to use a wider width than regular text. For this I tried to create a class in CSS, but it doesn’t work.

/* Class to modify width table */
.tc-width-55 {
	width: 50em;
}

I using it with |.tc-width-55|k in the first line of my table.

Any suggestions to how to achieve this?

Thanks in advance!

#2

I can get a width-class working here… <edit: OOPS! I did get it displaying on my demo site, but then I forgot to save that demo at tiddlyhost. Anyway, the width class for the table looks just as you would expect.

Still, I will confess to a shared challenge:

Sometimes I find that em-values and %-values and vw-values don’t behave well, but px values do (and you can just leave off the px, since it’s the default).

It’s touch and go, and I’ve never gotten to the bottom of why this is so.

So, I invite others to chime in.

In the meantime, if you want to get on with your work, try specifying a value in px.

#3

Hi @Springer! Thanks for you response, but i I wasn’t able to make the class work in my wiki, so i modified the layout to get a better result.

I needed to make the table looks like this (width: 55 em)

image
image792×856 192 KB

But the text needed to have width:40em, unfortunately i don’t know how to resize only the table

image
image792×856 113 KB

So i thought in a different way to show the informations, here the results

image

image
image792×661 49 KB

This wiki is just a hobby, so i learning stylesheets, CSS, HTML etc.

#4

Ah, here’s the link to a class specification that works:

https://quick-demo.tiddlyhost.com/#table%2055em%20class%20demo

#5

|tc-width-55|k would apply the style to the table. Drop the . if you want to use standard table syntax.

#6

Good eye! I didn’t notice the extra dot in there!

#7

Thanks @john.edw_gmail.com! , but it did not work. Maybe it’s because the limit of the tiddler-body i used is less then 55em

/* Limit line length to a traditionally-longish but readable value. */ 
div.tc-tiddler-body { 
  max-width: 40em; 
  margin: auto; 
	text-align: justify;
}
#8

I’m confused. You want your table width to be not just wider than the text paragraphs within the same tiddler, but actually wider than the tiddler that encloses it?

#9

It sounds like the real issue isn’t the table width, but the width of your body text.

You just need some css to ensure that your tiddler’s body paragraphs don’t extend beyond 40em… Right?

#10

It’s an alternative to visualizing the problem, it’s correct too!

The dimensions I want to keep are:

Tiddler: 60em
Table: 55em
Text: 40em

For the Tiddler width i used this code:

div.tc-tiddler-frame { 
  max-width: 60em;
  margin-left: auto;
  margin-right: auto;

For the text width, i used this:

div.tc-tiddler-body { 
  max-width: 40em; 
  margin: auto; 
	text-align: justify;
}

Thank’s again

#11

Hey guys, i finally find a solution, inside the tiddler i just use this code:

<style>
[data-tiddler-title="{{!!title}}"] :is(table) {
  margin-left: -3em;
}

:is([data-tiddler-title^=prefix],[data-tiddler-title$=suffix],[data-tiddler-title*=elloThe] 
) div{ 
... 
}
</style>

For more information see this