

My approach: For the image staging page I describein step 2 above, I have a different staging page for each major category of images. If anyone knows of a way to correct this, please contact me at organizational tip: If your website will have lots of images, you need to worry about organization. There must be CSS somewhere in TablePress that is overriding the responsive CSS. One importan caveat: the above will not enable resizing on images in the first column.

Here is the same region of the web page after including the above CSS: You may adjust the "30%" above to whatever fraction of the table width you wish to set for your image column. Here "column-2" is the column containing my images. Once again, "N" is the ID number of the table you wish to control. One remedy is to also inclulde the following in step 8. In this case, you may find that the images are resized much smaller than you want. The last step need only be done once for each table.Ī common use case is text in column 1 and images in column 2. It will show you the default preview of the mobile responsive table. Now you need to setup your table for Mobile and Tablet devices. And click on the toggle beside ‘Enable Responsive Table’.
Tablepress responsive columns how to#
Where N is the table number of the table you are working on. How To Make A Table Responsive Once you’ve created a table, click on the ‘RESPONSIVE’ tab. Click "Plug-in Options" under TablePress and enter the following in the "Custom CSS" text box:.Switch to the TablePress editing window and paste the HTML.Click on the "Text" tab and copy all the displayed HTML for the image.Click "Insert into page" which returns you to the staging page you created in step 2.Using the form at the right side of the Insert Media window, add any metadata and/or link you wish.Either select an existing image from your Media Library or click "Upload Files" and add the file you want. On the new page with the Visual tab selected, click the "Add Media" button.Create a separate new page (or erase the contents of an old page) that will act as a staging area for your images.With the help of and WFU Instructional Technology Analyst Ching-Wan Yip, I developed the following procedure for adding images to TablePress tables. The resulting page does not pass Google's "mobile-friendly" test. However, using the TablePress tool for adding images does not yield responsive images that resize for the small screens on mobile devices. The resulting page does not pass Google's 'mobile-friendly' test.

Tablepress is a great tool for building tables in Wordpress. Tablepress is a great tool for building tables in Wordpress. TablePress: how to make images responsive
