Responsive Tables – Scroll Only

Hi,

thanks for your post, and sorry for the trouble.

If the Responsive Tables Extension is not what you want (it’s not a perfect solution, I agree), how about simply using the “Horizontal Scrolling” feature that TablePress offers? Just click the corresponding checkbox on the “Edit” screen of the table.

Regards,
Tobias

P.S.: Thanks for the donation, I really appreciate it!

Hi, I thought about that, but I don’t want to use javascript on my tables. I like to keep things running as lean as possible.

I suppose I’ll have to find another way then. I think I used a div with inline CSS to do it on particularly wide tables before.

Thanks anyway!

Hi,

yes, that solution relies on JavaScript. If you don’t want to use JS, you can use CSS scrolling, for which you will indeed need a wrapper <div> then, e.g.

<div class="tablepress-scroll-wrapper">
[table id=123 /]
</div>

and then “Custom CSS” like

.tablepress-scroll-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
}

Regards,
Tobias

Yes, that looks like the solution. Unfortunately I’d have to go back and edit hundreds of tables! Oh well, maybe for another day ??

Thanks for your support

Hi,

nope, you can have TablePress add it to all tables automatically. See https://www.ads-software.com/support/topic/very-good-plugin-but-i-miss-bootstrap-support for the necessary code (that uses a filter hook).

Regards,
Tobias

When using this CSS scrolling, how do I code a minimum width for the columns?

For example, I want the table to take up the full width of the page on larger screens, but maintain a minimum width 200px for all 3 columns on mobile (with CSS scrolling).

Also, I added the <div> and custom css I’m not able to get any scrolling from side-to-side. (the column width for all 3 columns is 600px)

You can see table 7 here – https://blog.botanicalcraft.com/?p=164
pass – 1234

Hi,

thanks for your post, and sorry for the trouble.

Unfortunately, your link is only giving a “Not found” error for me. Is that really a published page?

Regards,
Tobias

Here is the full link – https://blog.botanicalcraft.com/vitamin-side-effects-extractions-vs-synthetics-comparison-chart/

Hi,

thanks! That links works and I can see the table now.
To set a minimum width here, so that you can see the scrolling more easily, please try adding this “Custom CSS”:

.tablepress-id-7 td {
  min-width: 200px;
}

Also, instead of setting the column widths with the Shortcode parameter, I suggest that you do that with CSS as well. That approach is much better.

Regards,
Tobias

Interesting, it looks like that Custom CSS sets a minimum width at 200px for all the columns. I guess that works.

Just in case I need to make a single column have a set width, would I do that in Custom CSS or on the page?

Hi,

correct. You could also set a minimum column width on a per-column basis with e.g. this “Custom CSS”:

.tablepress-id-7 .column-2 {
  min-width: 500px;
}

It pretty much works in the same was as setting the regular column width, as per https://tablepress.org/faq/column-widths/

Regards,
Tobias

Ok, well I’m getting the columns to stay at a minimum of 165px, and widen evenly on larger screens with the below Custom CSS code –

.tablepress-id-7 td {
	width: 220px;
	min-width: 165px;
}

With this code, the column widths will widen over 220px on larger screens but they stay proportionately the same size. (rather than longer content columns growing more) I’m not sure why it works, but it does!

Also, I was trying to donate $25 but it requires setting up a paypal account! I’m not able to do this for a number of reasons, so if you can accept CC without requiring a Paypal account I’d be glad to donate.

Hi Eric,

besides the commands for the individual widths, there’s another setting that affects this: The overall table width. That is set to 100% of the width of its container elements by default and takes precedence, so that only the ratio of the individual column widths is take into account. To change that as well (it should not be necessary in this particular case, but for completeness, I want to mention it), you could something like

.tablepress-id-7 {
  width: auto;
}

And thanks for wanting to donate, I really appreciate that! Unfortunately, as this is just a hobby for me and I’m not a freelancer or company, I can’t directly receive CC payments. However (although I’m not entirely sure and have just heard about this), there should be a possibility to use PayPal without actually creating an account, i.e. to use it on a one-time basis. If that does not work, maybe my Amazon wishlist at https://tobias.baethge.com/wishlist-us/ would be an alternative option?

Best wishes,
Tobias