Hi,
thanks for your question, and sorry for the trouble.
The reason for this is how the images are inserted with the caption. Due to that, their container element has a width. To work around that, you can try to add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:
.tablepress .wp-caption {
width: auto !important;
}
If that does not help, the scroll mode of the Responsive Tables Extension should give the best alternative results.
Regards,
Tobias
Thank you for your response Tobias
So I have backed out to the simplest version of the table on this page:
http://www.thomsonarchitectsinc.com/new-construction/
I only have images – I took out the captions to see if I can get just the images to be responsive with no luck. I added responsive=scroll to the short code but that didnt make a difference. My goal is to have all the images show on a mobile device -stacked so they all can be seen vs horizontal with only a few of the images showing.
When I upload images the html loads in width and height:
<img src=”http://www.thomsonarchitectsinc.com/wp-content/uploads/2015/10/thumb30.jpg” alt=”thumb30″ width=”150″ height=”150″ class=”alignnone size-full wp-image-1081″ />
I removed these and it still made no differerence –
This is the css i have in the options:
.tablepress td,
.tablepress th {
padding: 0;
}
.tablepress {
max-width: 950px;
width: 100%;
}
.tablepress img {
border: 1px solid #000000;
padding: 2px;
width: auto !important;
}
Am I pushing the limits of Tablepress by having images in the cells?
Thanks!
Anne
Hi Anne,
no, I’m afraid that you are pushing the limits of HTML tables in general, not directly of TablePress.
Tables have a fixed rows/columns structure, so that one can’t directly change how images are shown in a row on large screens, but in a column on small screens.
Now, as you “just” seem to be showing images in this table, you might not actually need a table. If you display this as a gallery (maybe with a gallery plugin), you might have greater control (with CSS) about how the images are shown, as such galleries usually use different HTML elements than tables.
Regards,
Tobias
Yes I agree, thanks for your help!
Hi,
no problem, you are very welcome! 🙂
Best wishes,
Tobias
Hello,
To create responsive tables in my site , I bought your plugin ” tablepress -responsive – tables ” . I placed it in the “Plugins” file. I activated. But it does not. It is not displayed in the dashboard of my site admin . I need your help. Thank you very much 🙂
Hi,
the Extension will indeed not show anything in the admin area, you will need to modify the Shortcode as explained on the website. I will reply with more details via email.
Regards,
Tobias
Thank’s Tobias
Regards
Kreaplume
Hi,
no problem, you are very welcome! 🙂 Good to hear that this helped!
Best wishes,
Tobias
P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!
Hello Tobias,
Many thanks for your great plugin! 🙂 I have just purchased and downloaded the responsive extension but whenever I enter the code you suggested in the documentation, it disturbs the code I created to change the table head row. I changes the colour of the head row so I had to remove it and I still don’t know where to put the code to make the tables responsive. Maybe I don’t understand where I’m supposed to put it…
Here is one of the tables I’ve created:
https://frenchlessonsonskype.com/price-list-euros/
Here is the code I’ve used WITH the responsive code:
[tablepress responsive=mode /]
[table id=123 responsive=flip responsive_breakpoint=device /all]
.tablepress thead th,
.tablepress tfoot th {
background-color: #f97630;
}
{
font-family: Bold Georgia;
font-size: 20px;
background-color: #f97630;
}
.tablepress .column-1 {
width: 150px;
}
.tablepress tbody td {
text-align: center;
font-family: Bold Georgia;
font-size: 20px;
}
.tablepress thead .sorting_asc,
.tablepress thead .sorting_desc,
.tablepress thead .sorting:hover {
background-color: #fbbc05;
}
.tablepress .row-2 .column-1 {
background-color: #ca2f33;
}
.tablepress .row-2 .column-2 {
background-color: #fbc119;
}
.tablepress .row-2 .column-3 {
background-color: #34a853;
}
.tablepress .row-2 .column-4 {
background-color: #dc0776;
}
.tablepress .row-3 .column-1 {
background-color: #0a7bc1;
}
}
.tablepress .row-4 .column-1 {
background-color: #0a7bc1;
}
.tablepress .row-3 .column-2 {
background-color: #f1f1f1;
}
.tablepress .row-3 .column-3 {
background-color: #f1f1f1;
}
.tablepress .row-3 .column-4 {
background-color: #f1f1f1;
}
.tablepress .row-4 .column-2 {
background-color: #f1f1f1;
}
.tablepress .row-4 .column-3 {
background-color: #f1f1f1;
}
.tablepress .row-4 .column-4 {
background-color: #f1f1f1;
}
I would really appreciate your help.
Kind regards,
Stephanie.
