Table too wide – does not fit on page

This link will show the problem https://livinggreenreviews.com/dehumidifier/

Hi,

thanks for your post, and sorry for the trouble.

I don’t see anything that is cut-off in the third column here.
This is probably indeed related to those long lines. Depending on whether there are spaces or hyphens in the lines, the browser is able to add word-wrapping. It might be necessary to add manual word-wrapping, e.g. by hitting “Enter” after the / in the long cells.

Regards,
Tobias

Tobias,

I did what you said and hit in enter in each cell and the problem disappeared immediately.

Thank you very much for your help and a great plugin.
Another donation on the way.

Marius

Sorry, spoke too soon ?? the problem persists.

I checked on 3 browsers to try and figure out why you cant see it and I see the 4th column cut in half on each https://livinggreenreviews.com/dehumidifier/
Also, on my edit screen the entries are not long and on one line. They show short and wrapped onto 2 lines.
I have hit enter at the end of each.
Marius

Here is a link to see what I have on the edit page https://livinggreenreviews.com/tablepress-edit-page-error-display/

Hi,

everything on the “Edit” screen looks fine to me. Could you maybe also post a screenshot of how the table is cut-off on the frontend?

Regards,
Tobias

Here is the screen shot Tobias. https://livinggreenreviews.com/tablepress-edit-page-error-display/
I created all of my other tables exactly the same way and this is the first time that I have had this problem.
Thanks for your help,
Marius

Hi Marius,

ah, no I see what you mean. I didn’t notice the images at first, as I’m using an ad blocker. Those images are what makes the table extend to the right. You’ll just have to restrict their width, e.g. with

.tablepress-id-25 img {
  width: 180px;
}

Regards,
Tobias

Tobias,
This is what I have in the cell for the picture, and the only reference to size that I can see (I don’t know how to code) is – width=”1″ height=”1″
<img border=”0″ src=”https://ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B00AU7GOIK&Format=_SL250_&ID=AsinImage&MarketPlace=US&ServiceVersion=20070822&WS=1&tag=agoracured-20&#8243; ><img src=”https://ir-na.amazon-adsystem.com/e/ir?t=agoracured-20&l=as2&o=1&a=B00AU7GOIK&#8221; width=”1″ height=”1″ border=”0″ alt=”” style=”border:none !important; margin:0px !important;” />

Below is what I have in the same image cell for one of my 20 other tables, as you can see, it is also – width=”1″ height=”1″
<img border=”0″ src=”https://ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B001DSLLH4&Format=_SL110_&ID=AsinImage&MarketPlace=US&ServiceVersion=20070822&WS=1&tag=agoracured-20&#8243; ><img src=”https://ir-na.amazon-adsystem.com/e/ir?t=agoracured-20&l=as2&o=1&a=B001DSLLH4&#8243; width=”1″ height=”1″ border=”0″ alt=”” style=”border:none !important; margin:0px !important;” />

All of my others have the same width and heights and there is no problem with any of them.
If you still think that this is the problem, and as I don’t see anything about pixels so that I can change it to your suggested 180, can you please tell me where and how I need to type the 180 pixels into the code?
Thanks

Hi,

you are right, the only width and height commands there are “1px”. However, the actual images don’t have a width or height parameter in their <img> HTML tag at all, which is why their size will be determined by the size of the actual image.

FIxing all this is as easy as pasting

.tablepress-id-25 img {
  width: 180px;
}

into the “Custom CSS” textarea on the “Plugin Options” screen of TablePress.

Regards,
Tobias

OK Tobias, I found the “Plugin Options” screen and I see the box “Front End Options” – “Custom CSS” and if I understand you correctly, I am to paste your code into that box.

Before I do, 2 questions:

1) Should I select anything under “User options”.
2) This will obviously affect all of my existing tables. Is there a chance that any of them will get messed up by me doing this?
Thanks for your help,
Marius

Hi Marius,

yes, that’s the correct field. The “User Options” don’t have to be changed, they don’t influence the CSS or the styling of the tables.

The code will also not affect or change any of the existing tables. The reason for this that we have stated the table ID (25) as part of the CSS code. This basically tells the browser to only use this code on table 25.

Regards,
Tobias

Hi Tobias,
Thank you again for your help. I wish I could say that it worked because I hate to keep bothering you.
Although it did sort out the width problem, it caused another problem. Now there is a big space below the images which are now also different sizes. I have it on this page for you to see https://livinggreenreviews.com/tablepress-edit-page-error-display/
Marius

Hi,

ah, yeah, that CSS now also affects the (formerly) invisible images that only had that width or height of 1px.
I therefore suggest that you remove the HTML code for the 1px image from each cell.

That will remove the extra space, but the images will have different heights of course, as they have different dimensions to begin with. If you give them the same width, the heights will be different, or if you give them the same height, the widths will be different.

Regards,
Tobias

Tobias,
” remove the HTML code for the 1px “
I don’t know how to do code but am going to give it a try.

First problem: I don’t see any “1px” in the below code?
I only see the 1″ width and height. So what exactly must I remove?

<img border=”0″ src=”https://ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B00AU7GOIK&Format=_SL250_&ID=AsinImage&MarketPlace=US&ServiceVersion=20070822&WS=1&tag=agoracured-20&#8243; ><img src=”https://ir-na.amazon-adsystem.com/e/ir?t=agoracured-20&l=as2&o=1&a=B00AU7GOIK&#8221; width=”1″ height=”1″ border=”0″ alt=”” style=”border:none !important; margin:0px !important;” />