G'day, I felt like experimenting a little bit, trying to figure out an easy
way to create a simple table that allows resizing rows and columns of data.
So a wee TiddlyWiki CSS + HTML itch that needed some scratching.
For yer interest, please find below a screenshot and the related code.
Cheers !
[image: Screenshot 2021-04-02 3.30.27 PM.png]
Code:
<$vars rowCount={{{ [[4]]}}}
colCount={{{ [[5]] }}}>
<table>
<tr>
<th>
</th>
<$list filter="[range<colCount>]">
<th style="padding:0px;border:1px solid black;">
<div style="resize:horizontal;overflow:auto; min-width:1em;
min-height:2em;text-align:center;">
{{!!title}}
</div>
</th>
</$list>
</tr>
<$list filter="[range<rowCount>]">
<$vars currentRow=<<currentTiddler>>>
<tr style="border:1px solid black;">
<th style="padding:0px;border:1px solid black;">
<div style="resize:vertical;overflow:auto;min-width:2em;
min-height:1em;text-align:center;">
<<currentRow>>
</div>
</th>
<$list filter="[range<colCount>]">
<$vars currentCol=<<currentTiddler>>>
<td style="border:1px solid blue;min-height:1em;padding:1px;">
<div style="width:100%; height:100%;overflow:auto;">
<<currentCol>>
</div>
</td>
</$vars>
</$list>
</tr>
</$vars>
</$list>
</table>
</$vars>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/b63eb895-c40b-477f-ad4a-6546611127c6n%40googlegroups.com.
