Transposed or Flipped Table

Tips & Tricks
, ,
#1

Sometimes you like to transpose your table from vertical to horizontal (data in column vs row). I was asked several times to have a transposed/flipped dynamic / quick table in Shiraz.

This is a simple solution to do that:

  • Create a tiddler, tag it with $:/tags/Stylesheet
  • Put below css inside it and save
.table-flipped {
	writing-mode: vertical-lr;
} 
.table-flipped tr td,
.table-flipped tr th
{
	writing-mode: horizontal-tb;
}
  • Now any table with class: table-flipped will transpose your table.

Example

!! Table

|table-flipped|k
|Cell1 |Cell2 |
|Cell3 |Cell3 |
|Header|Header|h
|Footer|Footer|f

!! Flipped table

|table-flipped|k
|Cell1 |Cell2 |
|Cell3 |Cell3 |
|Header|Header|h
|Footer|Footer|f

This will create

msedge_img_213_20240604
msedge_img_213_20240604697Ă—510 12.1 KB

NOTE: For quick try, you can download flipped-transposed-tables.json (606 Bytes)
and drop into https://tiddlywiki.com

Issues

  • Seems FireFox partially supports this
  • Caption does not work correctly

Please contribute and improved this.

5 Likes
#2

Another example (Tested on Edge/Chrome 125)

!! Vertical Table

<table>
<tr>
<$list filter="[range[1,5]]" variable="col">
<th><$text text={{{ [[Data-]addsuffix<col>] }}} /></th>
</$list>
</tr>
<$list filter="[range[0,10]]" variable="row">
<tr><$list filter="[range[1,5]]" variable="col">
<td><$text text={{{ [<row>multiply[5]add<col>] }}} /></td>
</$list>
</tr>
</$list>
</table>


!! Flipped table

<table class="table-flipped">
<tr>
<$list filter="[range[1,5]]" variable="col">
<th><$text text={{{ [[Data-]addsuffix<col>] }}} /></th>
</$list>
</tr>
<$list filter="[range[0,10]]" variable="row">
<tr><$list filter="[range[1,5]]" variable="col">
<td><$text text={{{ [<row>multiply[5]add<col>] }}} /></td>
</$list>
</tr>
</$list>
</table>

Produces

image
image552Ă—539 10.5 KB

#3

This is helpful! I’ve often wanted this kind of transformation, and never realized it could be accomplished with css!

Note that the above css will display a table’s caption sideways, and “the wrong way” (relative to how RTL readers expect to tilt their head for vertical reading). So you probably want to add something like:

.table-flipped caption {
     writing-mode: horizontal-tb; 
     width: 8em;
}

I couldn’t find any easy way with css to make the caption still display above or below the whole flipped table, alas. The caption seems to insist on being to left or right (that is, in the position that “would have been” top or bottom before the flip).