Support » Plugin: TablePress » Responsive Tables – Scroll Only

  • Resolved lowlight

    (@lowlight)


    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. 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/

Viewing 15 replies - 1 through 15 (of 17 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    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!

    Plugin Author TobiasBg

    (@tobiasbg)

    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

    Plugin Author TobiasBg

    (@tobiasbg)

    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 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 – http://blog.botanicalcraft.com/?p=164
    pass – 1234

    Plugin Author TobiasBg

    (@tobiasbg)

    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

    Plugin Author TobiasBg

    (@tobiasbg)

    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?

    Plugin Author TobiasBg

    (@tobiasbg)

    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/

    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.

    Plugin Author TobiasBg

    (@tobiasbg)

    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/ would be an alternative option?

    Best wishes,
    Tobias

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Responsive Tables – Scroll Only’ is closed to new replies.