How to transclude wikitext tables side by side

#1

Hi,

I can transclude wikitext tables one below the other, but if I attempt to put them side by side e.g.

{{Table}}{{Table}}

the tables break.

I’ve tried this as well

<$transclude $tiddler="Table" mode="block"/> <$transclude $tiddler="Table" mode="block"/>

(I’ve noticed that a space after {{Table}} will also break the table)

Thanks
Jon

#2

Hi Jon,

Create 2 tiddlers. The style sheet is the important one. flex-wrap: wrap; will allow the tables to be shown below each other, if there is not enough space.

This is a very fast experiment. So more testing will be needed.

title: table-side-by-side-styles
tags: $:/tags/Stylesheet

.tables-side-by-side {
  display: flex;
  flex-wrap: wrap;   /* key line: allows wrapping */
  gap: 20px;
  align-items: flex-start;
}

and a test tiddler

title: test-table-side-by-side

<div class="tables-side-by-side">

| a | b |
|test a |test b|

| c | d |
|test c |test d|

</div>

That should work. For your example it should look like this

<div class="tables-side-by-side">

{{Table}}

{{Table}}

</div>

You can download this file and drag & drop import it:

tables-side-by-side-experiment.json (501 Bytes)

#3

Fabulous Mario, that works perfectly!

Many thanks
Jon