For preventing float image overflow I had used @BurningTreeC solution! @pmario also has given a solution. See:
https://groups.google.com/g/tiddlywiki/c/5bZwwj6cyac/m/2LzFeA7AAwAJ
Is this the best practice in TW 5.2.0?
For Table cell overflow I use the below style from CSS text-overflow in a table cell? - Stack Overflow
td
{
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
I think there should be better solution!
For 1 and 2, you only need add (if I understood those cases well )
max-width: 100%;
Then the element have a maximum width equal to the width of its father.
<div class="test">
<img with_its_src_and_its_other_attributes.../>
</div>
.test{
width: 500px;
height: 800px;
background: yellow;
}
img{
max-width: 100%;
}
I think this does not work for tables when table cell! I will give an example!
@Mohammad, Some thoughts
There is a way to cause overflow to become horizontal or vertical scroll bars? I believe this can be set on tables. Perhaps we need some default settings on the viewTemplate for tiddlers as a whole?
Perhaps if we could get the content to “shrink to fit”, if it becomes too small to read (how can we detect this?) we are presented with the ability to;
- set the overflow on that tiddler or
- open in a modal or separate window
- zoom the content of the tiddler such that it overflows if too big.
I would like to see a generic solution built into tiddlywiki because such solutions depend on a technical understanding of TiddlyWikis UI and we should avoid forcing this on users, just because they have lots of content in a tiddler. Its about useful defaults.
1 Like
Co-incidentally this related discussion resulted in my reply Table with several outputs in one row - #7 by TW_Tones which may point to an answer here, in this discussion, the adoption of flexbox or other design method.
1 Like
Thank you Tones!
The Alvaro solution works for images and simple table in most cases!
If you use float images we normally have the issue!
For table when a tiddler is transclude as a cell, we encounter the issue!
I will look at the other solutions ad the one you just shared!
I start the table with |scrollable|k and that adds scrollbars.
The only code I can find in my wiki is
.scrollable { display:block; overflow:auto; }
in a $:/tags/Stylesheet tagged tiddler.
Not sure if that’s it…
2 Likes
It is also possible to ad css directly to the table element
table { display:block; overflow:auto; }
That will work for all tables in your wiki and you might not want that - if you have tables in your sidebar.
Then maybe create a tiddler with tag= $:/tags/Stylesheet and the content
.tc-tiddler-body table { display:block; overflow:auto; }
3 Likes
@Ste_W , @Birthe thank you both!
They works! I need to do some adjustment for example use word-break, and white-space wrap/nowrap to get good rendering results
It seems this is another solution. Now break on header, but word breaks on other rows.
.tc-tiddler-frame table td {
word-break: break-word;
}
IMO how to “best” handle overflowing table rows depends on preference. It would be neat if someone could make a TW to present various options along with their respective CSS so one could compare and choose. And since this probably is a pure CSS matter, I’m guessing one can find many solutions online, maybe even comparisons. Here is one writeup.
(BTW, this reminds me of an old proposal to improve wikitext tables)
2 Likes
This very true! It seems one cannot propose a general solution for all cases.
Rightly as the possibilities of tables is vast.
I would say that a basic variable in the mix that matters is whether the end-user wants the table forced to “viewport width” or is okay with “infinite horizontal” 
This is obviously a design issue rather than a “fault”.
Just a comment, TT
hmmm. That’s still a very valid discussion. …
— no rant, just some thoughts —
The main problem with tables is, that they are a complex element. A HTML table consists of up to 8 different elements and all of them can be styled using classes. Some elements have special attributes eg: scope="col" or scope="row" for TH elements. TD cells can span columns and or rows …
- A table cell is defined using the TD element
- A table knows about “rows” with the TR element
- It knows about columns with and COL element
- It knows about column-groups … COLGROUP element
- THEAD and TH define header elements but are different in nature
- TFOOT is the table footer
The CSS knows about :nth() element which I did use with a little experiment described at the GG
TW defines classes to TR elements evenRow and oddRow which typically is used to define a gray background to every other row for better readability.
So it’s close to impossible to describe a table with wikitext, if “data” and “style” should be done with the same syntax.
TW defines “the basics” … but for very complex tables we need to go back to HTML syntax and CSS because that’s the only way to have full control.
Right. (Lest we forget) I thought your work on Custom Markup useful for more sophisticated tables that still are doable in WikiText. It needs a bit of love? 
TBH, I always felt TW table syntax is one of the most amazing bits of it’s markup for parsing! The fact it doesn’t do 100% all the possible table “bells & whistles”, there is no denying it is a major achievement!
A comment, TT
Just stumbled upon this issue again. IMO the easiest fix for floating-images it the following bit of CSS, which is also known as a “clearfix” … Use your favourite search engine and feed it with this term.
.tc-tiddler-frame:after,
.clearfix::after {
content: "";
display: table;
clear: both;
}
Overflowing with tables is a different beast and probably not fixable anymore, because chances are high that it causes backwards compatibility problems. The last time I did try to fix table styling it “exploded” directly in front my face.
Thanks, it worked for me.
I was working on a similar problem and I just tried this CSS. I think it will work for all three of your use cases
div.tc-tiddler-frame.tc-tiddler-view-frame.tc-tiddler-exists {display:block; overflow:auto; }
1 Like