Table too wide – does not fit on page

Hi,

ah, yeah, that explanation was confusing indeed. Sorry.
What I meant was: Please remove all the HTML for images that looks like

<img src="https://ir-na.amazon-adsystem.com/e/ir?t=agoracured-20&l=as2&o=1&a=B00AU7GOIK" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />

(only with a different URL)

Regards,
Tobias

Tobias,

The HTML that you want me to remove includes my Amazon affiliate cookie (if that’s what its called?)
I think this is the part =”https://ir-na.amazon-adsystem.com/e/ir?t=agoracured-20&l=as2&o=1&a=B00AU7GOIK”

Shouldn’t I only be removing the part after that?

width=”1″ height =”1″ border=”0″ alt=”” style=”border:none !important; margin:0px !important;” />

I don’t know about all of this man … I am REALLY out of my depth here ??
Even if we do figure this out, how am I going to prevent this from happening to my future tables or will the fix that we are developing here going to be a band-aid for all of them?

Thanks,
Marius

Needless to say, I am extremely grateful for your support. I previously used another table plugin which gave me problems and the support was HORRIBLE. In the end I had no alternative but to ditch it. So thank you for always responding and always being so very helpful. I really appreciate it, as I hear everyone else who uses your plugin does as well.
Marius

Hi,

no problem, you are very welcome! ?? Always glad when I can help!

Best wishes,
Tobias

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

Tobias,
I posted 2 X so I guess you missed the one above?

Tobias,

The HTML that you want me to remove includes my Amazon affiliate cookie (if that’s what its called?)
I think this is the part =”https://ir-na.amazon-adsystem.com/e/ir?t=agoracured-20&l=as2&o=1&a=B00AU7GOIK”

Shouldn’t I only be removing the part after that?

width=”1″ height =”1″ border=”0″ alt=”” style=”border:none !important; margin:0px !important;” />

I don’t know about all of this man … I am REALLY out of my depth here ??
Even if we do figure this out, how am I going to prevent this from happening to my future tables or will the fix that we are developing here going to be a band-aid for all of them?

Thanks,
Marius

Hi,

ah, I missed that post indeed. Sorry.

No, this is not a cookie, but some sort of invisible tracking image. I don’t think that it is necessary, but if you’d rather keep it, we can also try a different solution.
Instead of removing the image, you can add a CSS class to all “real” images. We can then use that CSS class in the selector for the image width:
Basically, replace

<img border="0" src="

with

<img class="product-img" border="0" src="

and then change the CSS from above to

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

You can use this approach for other tables as well, just add that CSS class to each of the product image and copy/paste the CSS as necessary (with the table ID changed and the width set to the desired value).

Regards,
Tobias

Tobias,
The tracking code is for Amazon to know that I must be paid an affiliate commission when the user clicks on my image and buys the product. So lets not lose that ??

I carefully changed the code and CSS in all three columns as per your instructions. Here is what it reads now:
<img class=”product-img” border=”0″ src=”https://ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B00CIZ9FRE&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=B00CIZ9FRE&#8221; width=”1″ height=”1″ border=”0″ alt=”” style=”border:none !important; margin:0px !important;” />

The widths are fine but unfortunately the space below the images is still there. You can view the image here https://livinggreenreviews.com/tablepress-edit-page-error-display/

Why does this remind me of the story of the passenger who discovered that the pilot of his plane had died and was then able to talk to the control tower on the radio, follow instructions and actually land the plane safely, without ever having flown a plane before?

Hopefully we are going to land safely ??

Thanks,
Marius

Hi Marius,

those changes are great. Now just change the CSS code from

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

to

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

as mentioned above.
With that, we should have a good auto-pilot ??

Regards,
Tobias

Hello again Tobias,

I have come up against the same problem again. The images that I am pasting into the first row of my table are a little too wide and so the 4th column (last on the right)gets cut off.

When this happened the last time, you told me to remove this from my image code: <img border=”0” src=”
and replace it with: <img class=”product-img” border=”0″ src=”

It worked last time but not this time. Instead the image completely disappears
Here is the image code before changing it:
<img border=”0″ src=”https://ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B000XJNZ1Y&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=B000XJNZ1Y&#8221; width=”1″ height=”1″ border=”0″ alt=”” style=”border:none !important; margin:0px !important;” />

You also told me to add this code into the CSS:
1 tablepress – id-25 .product-img {
width: 180px;
}

As the table that I am working with now is #40, I changed 1d-25 to 1d-40 and inserted the code immediatelycode. I am not sure if that is OK?

You can see my problem table here: https://livinggreenreviews.com/erv/

Thank you for your support,
Marius

Hi Marius,

I just had a look at the CSS code that you pasted (with the adjusted table ID). That’s slighlty off, unfortunately. Please try again and enter exactly this:

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

Then, please also try replacing that

<img border=”0” src=”

with

<img class="product-img" border=”0” src=”

(i.e. add class="product-img" to the HTML).

Regards,
Tobias

It worked!
Thank you Tobias. Another tip on the way to you ??
However, I have to ask, if I am going t keep on having this problem, how do I know which of the previous fixes to use in the future?

Thanks for your support. Always great.

Marius

Hi Marius,

it’s just one previous fix actually. For all instances of tables that have such images in their header row, copy the necessary (and adjusted) CSS code into the “Custom CSS” (something like

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

), and then add the product-img CSS class to the HTML by replacing

<img border="0" src="

with

<img class="product-img" border="0" src="

(Note that my previous post contains slight mistakes, it uses the wrong quotation mark ” instead of the correct one " in some places.)

Regards,
Tobias

Sorry for the late response. Have been traveling.
OK I will try to keep that in mind for future.
Thanks again for your support
Marius

Hi Marius,

no worries! ?? Always happy to help!

Best wishes,
Tobias