Wordpress: Responsive images inside of Tablepress


final result, responsive images in table

Edit: 7/12/2020 Looking on this post 4 years later with MUCH more web development experience I’m wondering why a better solution to this problem wouldn’t be to just upload images that were all the exact and same size. Perhaps at the time I had a reason for this. Regardless, knowing what I know now, responsive images are fine, but it’s always better to upload an image the size that you need and no larger. Cheers.

By default the images inside of Tablepress cells will not size themselves responsively which can result in a very over-sized table width that goes outside of your box. See this sample here:

oversized images

First you will have to add a piece of custom CSS in the Tablepress settings.

.tablepress-id-N img {
	max-width: 100%;
	height: auto;

Where N is the table ID number that you want the images to resize. This just tells the images to resize to 100% of the width of their cells. So as the cells get smaller the max allowable width for the images will shrink. Unfortunately this isn’t enough, you will need to place your images in the cells manually instead of using the “Insert Image” button that is provided by Tablepress.

The key to this lies in the tag that you place inside the cells when editing your tables.

tablespress settings, insert image

If you use the “Insert Image” button that is provided for you in your “edit table” page you will get a piece of code that looks like this:

<img src="http://yourwebsite/wp-content/uploads/2016/04/phototitle1.jpg" alt="photodescription image_160px" width="160" height="160" class="alignnone size-full wp-image-12406" />

These images will stay static and will not re-size to have all your columns fit inside your box, even if you have set table width to 100% in the custom css using:

.tablepress-id-1 {
	width: 100% !important;

To get the images to re-size, instead go into a new page and insert the photos you want using the Insert>Add Media function on the “Visual” tab of the WYSIWG.

add media

Then go to the “Text” tab of the WYSIWG and copy this code, which will look like this:

<img class="alignnone size-full wp-image-990" src="https://ncoughlin.com/wp-content/uploads/2016/04/add-media-snip.jpg" alt="add media snip" width="483" height="448" />

Insert that code into the Tablepress cells manually and the photos will be responsive!

images are responsive