The overflow form tiddler and table are two issues which has not been discussed enough in Tiddlywiki!
There are example for overflow for images and long and length table rows!
My questions are what is THE BEST PRACTICE to prevent such overflows? I mean
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;
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.
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.
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…
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; }
@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)
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 …
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.