Please wrap tables inside “<div class=table-wrapper>” tags.

[–] [Sticky] • 1 pt

Here’s some code that will do pretty much what you wanted:

body #postcontent { position: relative; height: 40em; overflow: auto; }

Change the height value to your convenience.

[–] • 0 pt

You're right, thanks.

I could do the same for the side bar, but doing it for the entire sidebar just because of one table in it is not worth it.

But I am satisfied with the current solution of the table in the side bar.

[–] • 1 pt

They aren't wrapped for a reason, because on mobile, if they are too large, you'll get stuck if you scroll over one of them and release your touch.

[–] • 0 pt

Really? That's a pity.

Maybe there should be a scrollable margin on the right side (if it works).

I asked about it because a table with too much width (overflow-x) flows outside of its parent element, which looks ugly.

[–] • 1 pt

Here's the code:

table td, table th { max-width:20em; }

[–] • 0 pt

I have already figured it out, but thanks nevertheless.

I also saved some space by reducing the paddings.

[–] • 1 pt

You can use CSS to limit the width of its columns within <td> max-width

[–] • 0 pt

And... why are people still using tables?

[–] • 1 pt

To play:

[–] • 0 pt

Why not?

Tables are useful for storing information.