WordPress.org

Forums

TablePress
[resolved] Responsive Tables - Scroll Only (18 posts)

  1. lowlight
    Member
    Posted 11 months ago #

    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/

  2. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    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!

  3. lowlight
    Member
    Posted 11 months ago #

    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!

  4. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    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

  5. lowlight
    Member
    Posted 11 months ago #

    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

  6. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    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

  7. Eric Potratz
    Member
    Posted 1 month ago #

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

  8. Eric Potratz
    Member
    Posted 1 month ago #

    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

  9. TobiasBg
    Member
    Plugin Author

    Posted 1 month ago #

    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

  10. Eric Potratz
    Member
    Posted 1 month ago #

  11. TobiasBg
    Member
    Plugin Author

    Posted 1 month ago #

    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

  12. Eric Potratz
    Member
    Posted 1 month ago #

    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?

  13. TobiasBg
    Member
    Plugin Author

    Posted 1 month ago #

    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

  14. Eric Potratz
    Member
    Posted 1 month ago #

    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!

  15. Eric Potratz
    Member
    Posted 1 month ago #

    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.

  16. TobiasBg
    Member
    Plugin Author

    Posted 1 month ago #

    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

  17. Eric Potratz
    Member
    Posted 1 month ago #

    Sorry, what does the width: auto; do?

    I will see what I can do with the wishlist!

  18. TobiasBg
    Member
    Plugin Author

    Posted 1 month ago #

    Hi,

    in a nutshell, the width: auto; basically tells the browser to not apply a width to the table directly, but to calculate it from the desired widths for the individual columns. It can therefore be helpful if maintaining specific column widths is more important than achieving a certain table width.

    Regards,
    Tobias

Reply

You must log in to post.

About this Plugin

  • TablePress
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags

No tags yet.