Tablepress breaks post content container

Hi!

Thanks for your post and sorry for the trouble!

I can’t seem to reproduce this, I don’t seen any overlapping. And given that you turned on “Horizontal Scrolling” for these tables, which is one way to solve the “responsiveness” challenge, I can’t see how you would see overlapping… So, it seems that you were able to fix this already?

Best wishes,
Tobias

Hi and thanks for looking into this.

You might have overlooked the error which is quite subtle. Here two screenshots that illustrate what the problem is about:

Post Content Element Issue (With Tablepress Table):
https://1drv.ms/i/s!AlQHsqtJGzeatZMrIHCTYt_Jy_qgww?e=ZzhCg3

Post Content Element Normal Without Tablepress Table:
https://1drv.ms/i/s!AlQHsqtJGzeatZMqbHAgE058feo2FA?e=eLRlHr

• This reply was modified 6 days, 22 hours ago by mkasanm.

Hi,

ah, thanks for those screenshots! Now I see what you mean!

Well, yes, in some sense, the table is causing this, but only because it can, so to say: The HTML structure in the post and page template seems to be different. In the post, there’s, for example, the CSS code

.tdi_16 .tdb-block-inner {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

which let’s that content expand to 1000px, if needed. And as your table is very wide, the browser will simply do that, as this CSS code allows it. The HTML and CSS in the page template seems to be different, and therefore the browser won’t do the same there.

All this is however not directly caused by the table, the result would be the same with a very large image, for example. So, to fix this, I recommend to heavily simplify this HTML structure.

Best wishes,
Tobias

Tobias,

Thanks for this hint. I have been able to fix this reducing the max-width by 60px.

Have a great day,
Markus

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress in the plugin directory. Thanks!

Tobias,

One more question. Is it possible to define a maximum table width for the visible area of all tables using CSS? The solution I found leads to other issues unfortunately.

Thanks,
Markus

Hi,

once you use the visitor features, like sorting or filtering, the table is wrapped in <div> container with the CSS class dt-container, so you could maybe try setting a width and/or max-width on that CSS class.

Best wishes,
Tobias