Removing Cell Padding Around Images

I’ve also considered this may be due to a container around the image. I tried the following code to remove any container causing the gap, but it was not responsive:

.tablepress-id-123 caption {
display: none;
}

Some of my table cells are merged, and I’m not sure if there is a certain way to remove the white gaps between the images: https://dalaigroup.com/contact-us/

What CCS code option could I be missing?

Thanks

Hi,

thanks for your question, and sorry for the trouble.

You will actually have to remove the padding inside the table cells for this table, e.g. with this “Custom CSS”:

.tablepress-id-InternationalBusinessLocations tbody td {
  padding: 0;
}

In addition, you should simplify the HTML code that you have inserted. For example, there are <div> container elements in the cell, which should not be necessary.
Also, please add another parameter to the used Shortcode on that page, to turn off the conversion of line breaks in the code to HTML tags:

[table id=tablepress-id-InternationalBusinessLocations convert_line_breaks=false /]

Regards,
Tobias

Wow! That helped clear up the gap, nicely. Thanks!

I’ve inserted your modified shortcode at the page level; however, the following error appears on the page itself: [table “tablepress-id-InternationalBusinessLocations” not found /]

I’ve also kept the original shortcode for the existing table on the page, because I have one more question. Any idea how I could eliminate the final gap above the bottom right image? It’s a basic 3 X 3 table, I just needed to merge a few cells so I could add style codes to text an fit images correctly. I’m not sure if that if the problem is in one of the table cells itself, or somewhere else?

Thanks so much for all your tips on simplifying code, Tobias. I’ve been trying to apply of some of the code a coworker used for other elements of the site.

My apologies, here’s the link for the page, again: https://dalaigroup.com/contact-us/

Hi,

ah, my bad. The Shortcode to be

[table id=InternationalBusinessLocations convert_line_breaks=false /]

of course.

Regards,
Tobias

Excellent! I have a final question about the image sizes, here.

I’ve tried to use specific image sizes so that they would all fit together seamlessly, creating a 700 px X 1400 px table. There’s extra white space below the first image. It seems as though the first image of Baltimore has not changed in size, while the second half of the table has become larger.

Is there a way to set the width and height for individual table cells to align everything properly? Or is there a better way to make sure everything remains proportionate? I’m not sure if it’s a table cell solution or of my images that need to be modified with an additional command.

Here’s the page link: https://dalaigroup.com/contact-us/

Thanks so much!

Hi,

it might require a mixture of both.

Setting the size of a table cell is possible, and you are already using the correct CSS for that — except for a small mistake:
In
width:350px px;
the unit is doubled, which might break this. This line (and in a similar way the following ones in your code) should be
width:350px;

You could then play with this value, but might also have to adjust the images sizes.

I also recommend using the Developer Tools in your browser (I prefer Chrome), as you can live-edit the CSS there for testing and also inspect the actual size of elements on the page.

Regards,
Tobias

Tobias, you have been so helpful. I’m almost there! I found the code mistakes and removed them. I have also inspected each of the elements to see if they provide any more clues.

The “height” command in my plugin code was causing the large and unnecessary gaps. So, I removed all the code that was unnecessary or may be contributing to the problem. I’m so close!

I have 2 tables at the bottom of my contact page: https://dalaigroup.com/contact-us/

They both have one very tiny white gap left. If you look closely at each, you will notice 1 to 3 pixels of white space between one of the images. Now that I’ve cleaned up the plugin code, I’m not sure where to look. When I inspect the element, it tells me there is about 2 to 3 pixels of padding where the white line is. I’m not quite sure how to remove the last bit of it!

Thanks for all the help!

Hi,

this is now probably from rounding errors. The images are actually bigger than what is visible there, i.e. the browser is scaling them.

Unfortunately, I don’t really see an easy way to fix this, sorry.

Regards,
Tobias

Thanks for informing me of the rounding error. With that, I could try measuring the available width on the webpage itself and upload smaller images to fit across the desktop theme. It could just take a little bit more of playing around with the image size uploaded to the media library.

You’ve been so helpful condensing the code.

Thank you!

Hi,

no problem, you are very welcome!

Best wishes,
Tobias

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