Table with specified column width

Developers
, ,
1

Hi Experts,
I am using tables and often I need tables with different width of the columns.
Yes it is possibel to define classes but than I need a lot of them for each change :cry:
Is it possible to have on top of the table a width definition as tc-first-col-min-width?
Here a examples I think about

|tc-with-30 tc-with-70 |k
|This is a caption |c
|Cell1 |Cell2 |
|Cell3 |Cell4 |
|Header|Header|h
|Footer|Footer|f

and in an other table I can use

|tc-with-10 tc-with-40 tc-with-50 |k
|This is a caption |c
|Cell1 |Cell2 |Cell3 |
|Cell1 |Cell2 |Cell4 |
|Header|Header|h
|Footer|Footer|f

Is there a function or workaround possible?

Thx in advance
Stefan

2

Set the width within the column as needed? I typically use the header, but any cell in the column would do.

|@@display:block;width:150px;Header1@@ |@@display:block;width:75px;Header2@@ |@@display:block;width:250px;Header3@@ |h
|Cell1 |Cell2 |Cell3 |
|Cell4 |Cell5 |Cell6 |
|Footer1|Footer2|Footer3|f
|This is a caption |c

image
image475×114 1.91 KB

1 Like
3

With the PR that I created recently this should be relatively straight forward.

The demo-page of the PR that is not merged yet is at: https://tiddlywiki5-git-fork-pmario-table-pa-668a44-jermolenes-projects.vercel.app/ There is no guarantee, that it will be merged.

So you may go to GH and give the PR a “thumbs up” and a short comment, if it works for you.

If you copy the following code to the preview page, you can play with it.

<style>
.my-table-1 [data-col="1"] {
  min-width: 10em;
}
.my-table-1 [data-col="2"] {
  min-width: 5em;
}
.my-table-1 [data-col="3"] {
  min-width: 20em;
}
</style>


|my-table-1|k
| Header1 | Header 2 | Header3|h
|Cell1 |Cell2 |Cell3 |
|Cell4 |Cell5 |Cell6 |
|Footer1|Footer2|Footer3|f
|This is a caption |c

The info about the proposed default classes can be seen it the PR OP.
The PR is at: table parser add data attributes for easier styling by pmario · Pull Request #8175 · Jermolene/TiddlyWiki5 · GitHub

Also see: https://tiddlywiki.com/#Custom%20styles%20by%20data-tags

2 Likes
4

And to take the new behavior to a more dynamic level, this works (proof-of-concept) — try copying into same pre-release url above:

<style>
.custom [data-col="1"] {
  min-width: <$text text={{{ [<currentTiddler>get[first-col]] }}}/>em;
}
.custom [data-col="2"] {
  min-width: <$text text={{{ [<currentTiddler>get[second-col]] }}}/>em;
}
.custom [data-col="3"] {
  min-width: <$text text={{{ [<currentTiddler>get[third-col]] }}}/>em;
}
</style>


|custom|k
|!Header1 <br><$edit-text field="first-col" size=3/>|!Header 2 <br><$edit-text field="second-col" size=3/>|!Header3 <br><$edit-text field="third-col" size=5/>|h
|Cell1 |Cell2 |Cell3 |
|Cell4 |Cell5 |Cell6 |
|Footer1|Footer2|Footer3|f
|This is a caption |c

I could easily imagine adopting this kind of solution, with the edit-text bit in a span that makes it show only to author of table, while being hidden for visitors. This would let you tweak column width right there at the location of the table, without going into edit mode. (Of course, your in-tiddler style class would need to be named in a way that guarantees uniqueness; when this tiddler is in the story river, it will affect the css for any other tiddler with the .custom class.)

1 Like
5

It would be good if we could develop a standard here. I have myself taken to using a simple config tiddler for what I call “mode” tiddlers, which contain yes OR no, and a field called config-values containing the values with the default first “yes no”.

  • $:/config/design-mode
  • $:/config/author-mode
  • $:/config/debug-mode

Then the raw use of a mode test in a filter is [{$:/config/author-mode}match[yes]]

  • I would be tempted to put a macro in the above table, in the macro definition this is tested, rather than code inside the table.
6

I do not really see a difference between design and author mode. Or is design = developer mode?

7

Designer is close to developer, but it’s about designing the wiki, and as a user/super user not a developer adding features, changing core or developing JS plugins, but as a wiki designer using the features to build for a user (may later be oneself).

  • I tend to use designer mode to hide tools or content I need to see when designing but once running is hidden from regular users.
  • But I have also used debug-mode while researching a fault. It allows diagnostic info to be shown but quickly turned off as needed.

The difference with author mode is it is more likely to be used when the wiki is used for creating content, be it blog posts, or book chapters.

In many ways then you may be unlikely to use these modes yourself. But if someone decides to add it to a solution you install, you may come to use it.

Another I have used is wiki-mode with accompanies a tiddler and field mode with read-only, view, update, edit through to design/develop with a cascade so you can override the resulting mode locally.

8

This is a useful piece of code @@display:block;width:150px;Header1@@ but is it possible to do something similar to specify the colmn width as a percentage of the overall table width?

9

I’d like to know this too! It seems to be possible with table classes and/or computed values, but not inline and “on the fly” as it were.

Meanwhile, you may find some use in appealing to vw units (view-window percentages), like this:

|@@display:block;width:10vw;Header1@@ |@@display:block;width:20vw;Header2@@ |@@display:block;width:5vw;Header3@@ |h

These units don’t scale with the width of the table itself, but they do adapt to the overall view window, which — in some use cases — may be enough.

1 Like
10

I’m not a CSS guru, but the fixed pixel width span forces the <TD> to size, while the %width span calculates a % for the span within the <TD>. At least that is the way I understand it.