WordPress.org

Ready to get started?Download WordPress

Forums

[Plugin: Tablepress] Trying to put 2 tables side by side (9 posts)

  1. griffmeister
    Member
    Posted 1 year ago #

    Hi
    I'm trying to put 2 tables side by side but they end up being on top of each other. Any way to fix this?
    Also, the text in the table cells seems to be very blurry! Maybe I need glasses! How can I fix the blurry text? Thanks

  2. TobiasBg
    Member
    Posted 1 year ago #

    Hi,

    thanks for your questions.

    To put the tables next to each other, you should place them in a wrapping <div> container:

    <div class="tablepress-wrapper">
    
    [table id=1 /]
    
    </div>
    
    <div class="tablepress-wrapper">
    
    [table id=2 /]
    
    </div>

    (The empty lines are important here, as WordPress sometimes adds wrong line break tags here.)

    With this wrapper, you'll just need "Custom CSS" like this, on the "Plugin Options" screen:

    .tablepress-wrapper {
        width: 50%;
        float: left;
        padding-right: 10px;
    }

    This will also add some spacing between the tables.

    About the blurry text: Not sure what's causing this, it could be a text shadow that is added by your theme. To find out details, I'd need to take a direct look at the table. Can you therefore please post a link?

    Thanks!
    Tobias

  3. griffmeister
    Member
    Posted 1 year ago #

    here's the link:

    http://upongoogle.com/josephkramer/test-page-for-responsive-table/

    Thanks for the other advise!

  4. griffmeister
    Member
    Posted 1 year ago #

    actually, just got it sorted. When you mentioned the theme might have a text shadow I went looking in inspect elements. Found it thanks.

  5. TobiasBg
    Member
    Posted 1 year ago #

    Hi,

    thanks for the link.
    Yes, there's a text shadow in that table, and it uses white text colors. To change this, I recommend to paste this into the "Custom CSS" textarea on the "Plugin Options" screen of TablePress:

    .tablepress tbody td,
    .tablepress thead th {
        text-shadow: none;
        color: #000000 !important;
    }

    Regards,
    Tobias

  6. griffmeister
    Member
    Posted 1 year ago #

    Hi Tobias
    I'm still having trouble putting 2 tables side by side. I inserted the html into the text tab of the page and I inserted the css into the "custom css" in the "plugin options" but the tables are still on top of each other, over to the left hand side. Do you mind having a look at it again? Thanks.

  7. TobiasBg
    Member
    Posted 1 year ago #

    Hi,

    I guess, we'll have to slighty reduce the width value in the "Custom CSS" to account for rounding errors:
    Please try reducing the width to 48%:

    .tablepress-wrapper {
        width: 48%;
        float: left;
        padding-right: 10px;
    }

    Regards,
    Tobias

  8. griffmeister
    Member
    Posted 1 year ago #

    Perfect! Thank you Tobias.

  9. TobiasBg
    Member
    Posted 1 year ago #

    Hi,

    sure, no problem! You are very welcome! :-)

    Best wishes,
    Tobias

    P.S.: In case you haven't, please rate TablePress here in the plugin directory. Thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic