Hi,
thanks for your post, and sorry for the trouble.
Also, thanks again for your donation, I really appreciate it! Both Patreon and PayPal (I assume that you saw the links on https://tablepress.org/donate/ ) are fine for me 🙂
1. This is an interesting approach, and it works nicely! You could maybe hide that extra column on phones (when the tables are shown underneath each other). For that, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:
@media screen and (max-width:836px) {
.tablepress-id-22 .column-8 {
display: none;
}
}
2. What exact code difference are you seeing? Can you paste the codes here again (wrapped in backticks ` so that the code is preserved and not interpreted by the browser)?
3. Just installing and activating the Extension is not enough. Did you add a responsive=... parameter to the table Shortcode on https://oldsummit.com/treefresh/ ?
Best wishes,
Tobias
#1. I don’t understand why this works.
[table id=55 cache_table_output=”0″ /]
Surly there is a proper way to put two tables side by side?
The css worked perfectly.
#2. <img class="aligncenter wp-image-9145" src="https://patchencalifornia.com/wp/wp-content/uploads/CheckFree-150x132.jpg" alt="" width="35" height="25">
<img src="https://patchencalifornia.com/wp/wp-content/uploads/CheckFree-150x132.jpg" alt="" width="35" height="25" class="aligncenter size-thumbnail wp-image-9145" />
The difference is the placement of the “class” and the added “size-thumbnail”
#3. Sorry, some rubish had snuck into the code. Fixed that and it functions but does not allow scrolling of the whole table.
https://oldsummit.com/home
Hi,
1. That Shortcode has nothing to do with the tables being shown next to each other. That’s kind of coming from the way how your theme’s CSS is structured. And that is the proper way to do this 🙂
2. Thanks for the code! The placement of the various parameters is not relevant here. They are interpreted in the same way. The size-thumbnail is a CSS class that could potentially cause differences, if your theme where to apply CSS code to it. If the image is shown fine, there’s nothing that needs to be changed here.
3. Once I make the browser window narrow, I can actually scroll the table horizontally. Isn’t that what you want?
Regards,
Tobias
#1. Got it, Thank you
#1. Got it, Thank you
#1. Yes; the scroll works but notice how the images on the right side disappear, at least on Chrome.
Hi,
#3: I’m not sure what you mean. Do they disappear when scrolling? Or what am I missing? Can you maybe post a link to a screenshot (e.g. uploaded to a service like https://imgur.com/).
Regards,
Tobias
Hi,
ah, thanks! I see what you mean.
To fix that, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:
.tablepress img {
max-width: none !important;
}
Regards,
Tobias
My apologies for the delayed response. Your suggestion worked just fine – thank you. My last question is “why”? Please forgive my lack of experience but it seems that WordPress, the theme, and the plug-in, all with their own CSS are in a constant struggle, and the !important term settles the argument. My choice would be to set each column to a specific width (adding up to a fixed total of course). The image resizing and text wrapping only add confusion for the user. Why not just let the scrolling do what it seemingly is intended to do?
EXAMPLE:
I have a table of 8 columns (50px,250px,50px,250px,50px,250px,50px,250px). Would not one of the following be the proper form?
[table id=97c responsive=scroll column_widths=”50px|200px|50px|200px|50px|200px|50px|200px” /]
or
[table id=97c responsive=scroll column_widths=”5%|20%|5%|20%|5%|20%|5%|20%” /]
The scroll works but only after totally distorting the column widths by shrinking the images and wrapping the text.
https://patchencalifornia.com/workers/cashier/2/
Jim
Hi Jim,
the “why” is rather difficult to answer here. Essentially, it comes down to conflicting goals (a columns wants to be “this” wide, but an image in it wants to be “that” wide), which the browser has to fulfill when it’s rendering the page. It then has to take into account the CSS code from various sources, which can be defined with different priorities (that’s what the !important influences, for example), as well as the HTML/CSS specifications, and so on.
One priority there actually is that it wants to make as much content visible as possible. That’s why it doesn’t like tables overflowing to the right, and will instead shrink images (if the CSS gives it that possibility) or it will word-wrap text.
Now, your definition of the column width is technically correct — but I don’t recommend this particular form, and instead recommend the direct CSS way (i.e.
.tablepress-id-97c .column-1,
.tablepress-id-97c .column-3,
.tablepress-id-97c .column-5,
.tablepress-id-97c .column-7 {
width: 50px;
}
.tablepress-id-97c .column-2,
.tablepress-id-97c .column-4,
.tablepress-id-97c .column-6,
.tablepress-id-97c .column-8 {
width: 250px;
}
This has more flexibility, as you can set other CSS properties at the same time. For example, you could also add
min-width: 50px;
and
min-width: 250px;
to these CSS blocks — which essentially will give the browser another constraint that it has to work into the rendering of the tables.
In your case, it should be the desired one: The tables will then extend to the right, so that scrolling can kick in.
Regards,
Tobias
Thank you. That works perfectly.
Hi,
no problem, you are very welcome! 🙂 Good to hear that this helped!
Best wishes,
Tobias
