Title: Responsive Tables – Scroll Only Last modified: August 21, 2016 --- # Responsive Tables – Scroll Only * Resolved [lowlight](https://wordpress.org/support/users/lowlight/) * (@lowlight) * [12 years, 3 months ago](https://wordpress.org/support/topic/responsive-tables-scroll-only/) * Hi, I just upgraded to TablePress after many years from WP Tables. Thanks for the great plugin that I have used all these years! I have sent some bitcoin your way BTW * As for my problem, I like the ability to add responsive tables to the site, however the way it moves headings to the side kind of messes up my design. A lot of my tables have cells with multiple rows rather than just one, so they don’t line up properly. * You can see an example [here](http://www.hardcoreware.net/noctua-nh-d15-review/). Feel free to resize the browser to see what it does. * Is there a way to ONLY use the scrollbar feature? My reason for this is that I wouldn’t have to edit my source code for each article with a table, adding scrolling divs.. A plugin extension is perfect for me. * Thanks! * [https://wordpress.org/plugins/tablepress/](https://wordpress.org/plugins/tablepress/) Viewing 15 replies - 1 through 15 (of 17 total) 1 [2](https://wordpress.org/support/topic/responsive-tables-scroll-only/page/2/?output_format=md) [→](https://wordpress.org/support/topic/responsive-tables-scroll-only/page/2/?output_format=md) * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [12 years, 3 months ago](https://wordpress.org/support/topic/responsive-tables-scroll-only/#post-4857779) * 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! * Thread Starter [lowlight](https://wordpress.org/support/users/lowlight/) * (@lowlight) * [12 years, 3 months ago](https://wordpress.org/support/topic/responsive-tables-scroll-only/#post-4857801) * 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! * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [12 years, 3 months ago](https://wordpress.org/support/topic/responsive-tables-scroll-only/#post-4857819) * 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 `
` then, e.g. * ```
[table id=123 /]
``` * and then “Custom CSS” like * ``` .tablepress-scroll-wrapper { overflow-x: auto; overflow-y: hidden; } ``` * Regards, Tobias * Thread Starter [lowlight](https://wordpress.org/support/users/lowlight/) * (@lowlight) * [12 years, 3 months ago](https://wordpress.org/support/topic/responsive-tables-scroll-only/#post-4857827) * 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 * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [12 years, 3 months ago](https://wordpress.org/support/topic/responsive-tables-scroll-only/#post-4857839) * Hi, * nope, you can have TablePress add it to all tables automatically. See [http://wordpress.org/support/topic/very-good-plugin-but-i-miss-bootstrap-support](http://wordpress.org/support/topic/very-good-plugin-but-i-miss-bootstrap-support) for the necessary code (that uses a filter hook). * Regards, Tobias * [Eric Potratz](https://wordpress.org/support/users/epotratz/) * (@epotratz) * [11 years, 5 months ago](https://wordpress.org/support/topic/responsive-tables-scroll-only/#post-4858279) * 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). * [Eric Potratz](https://wordpress.org/support/users/epotratz/) * (@epotratz) * [11 years, 5 months ago](https://wordpress.org/support/topic/responsive-tables-scroll-only/#post-4858280) * Also, I added the
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 – [http://blog.botanicalcraft.com/?p=164](http://blog.botanicalcraft.com/?p=164) pass – 1234 * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [11 years, 5 months ago](https://wordpress.org/support/topic/responsive-tables-scroll-only/#post-4858281) * 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 * [Eric Potratz](https://wordpress.org/support/users/epotratz/) * (@epotratz) * [11 years, 5 months ago](https://wordpress.org/support/topic/responsive-tables-scroll-only/#post-4858282) * Here is the full link – [https://blog.botanicalcraft.com/vitamin-side-effects-extractions-vs-synthetics-comparison-chart/](https://blog.botanicalcraft.com/vitamin-side-effects-extractions-vs-synthetics-comparison-chart/) * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [11 years, 5 months ago](https://wordpress.org/support/topic/responsive-tables-scroll-only/#post-4858283) * 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 * [Eric Potratz](https://wordpress.org/support/users/epotratz/) * (@epotratz) * [11 years, 5 months ago](https://wordpress.org/support/topic/responsive-tables-scroll-only/#post-4858284) * 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? * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [11 years, 5 months ago](https://wordpress.org/support/topic/responsive-tables-scroll-only/#post-4858285) * 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 [http://tablepress.org/faq/column-widths/](http://tablepress.org/faq/column-widths/) * Regards, Tobias * [Eric Potratz](https://wordpress.org/support/users/epotratz/) * (@epotratz) * [11 years, 5 months ago](https://wordpress.org/support/topic/responsive-tables-scroll-only/#post-4858286) * 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! * [Eric Potratz](https://wordpress.org/support/users/epotratz/) * (@epotratz) * [11 years, 5 months ago](https://wordpress.org/support/topic/responsive-tables-scroll-only/#post-4858287) * 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. * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [11 years, 5 months ago](https://wordpress.org/support/topic/responsive-tables-scroll-only/#post-4858288) * 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 [http://tobias.baethge.com/wishlist-us/](http://tobias.baethge.com/wishlist-us/) would be an alternative option? * Best wishes, Tobias Viewing 15 replies - 1 through 15 (of 17 total) 1 [2](https://wordpress.org/support/topic/responsive-tables-scroll-only/page/2/?output_format=md) [→](https://wordpress.org/support/topic/responsive-tables-scroll-only/page/2/?output_format=md) The topic ‘Responsive Tables – Scroll Only’ is closed to new replies. * ![](https://ps.w.org/tablepress/assets/icon.svg?rev=3192944) * [TablePress - Tables in WordPress made easy](https://wordpress.org/plugins/tablepress/) * [Frequently Asked Questions](https://wordpress.org/plugins/tablepress/#faq) * [Support Threads](https://wordpress.org/support/plugin/tablepress/) * [Active Topics](https://wordpress.org/support/plugin/tablepress/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/tablepress/unresolved/) * [Reviews](https://wordpress.org/support/plugin/tablepress/reviews/) * 17 replies * 3 participants * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * Last activity: [11 years, 5 months ago](https://wordpress.org/support/topic/responsive-tables-scroll-only/page/2/#post-4858290) * Status: resolved