Side by Side

  • Resolved m.nelson0100

    (@mnelson0100)


    12 years, 5 months ago

    Hello,

    I followed your other suggestions to get tables side by side and it has worked great. For the life of me I cant figure out to align them to the center of the page. I cant give link as I am building offline. But here is my code:

    .tablepress {
    border: 1px solid black;
    width: auto;
    }

    .tablepress .even td {
    background-color: #5F95B3;
    }

    .tablepress .odd td {
    background-color: #DBDBDB;
    }

    .tablepress tbody td,
    th {
    text-align: center;
    border: 1px solid black;
    padding: 0;
    }

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

    .tablepress-id-1 .row-1 {
    font-weight: bold;
    padding: 0;
    }

    .tablepress-id-1 .column-1 {
    padding-left: 10px;
    padding-right: 10px;
    }

    .tablepress-id-1 .column-2 {
    padding-left: 10px;
    padding-right: 10px;
    }

    .tablepress-id-2 .row-1 {
    font-weight: bold;
    padding: 0;
    }

    .tablepress-id-2 .column-1 {
    padding-left: 10px;
    padding-right: 10px;
    }

    .tablepress-id-2 .column-2 {
    padding-left: 10px;
    padding-right: 10px;
    }

    The 2 tables line up side by side and I adjusted the % to have them close with a little space but want them to also be centered as is on the page.

    Thanks for any help,
    M

    http://wordpress.org/plugins/tablepress/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    12 years, 5 months ago

    Hi,

    thanks for your question, and sorry for the trouble.

    So, if I understand correctly, you want to center the set of two tables on the page?
    The best approach to that should be to wrap them in another <div> container and then use some CSS like

    margin: 0 auto;
text-align: center;

    on that.
    Unfortunately, I can’t give you exact code as you are working offline, but as you seem to have some knowledge in CSS, you should be able to get this to work.

    Another idea, without that extra container, would be to give some left margin to the left table and some right margin to the right table.

    Regards,
    Tobias

    Thread Starter m.nelson0100

    (@mnelson0100)

    12 years, 5 months ago

    Thanks so much. I put a new container and tried with the margin code left and right. I get an issue where the tables wont position to the center but get longer. I have taken a sample online so you can look. They are side by side but nested to the left where I want them in center side by side.

    LINK

    Thanks so much!!!

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    12 years, 5 months ago

    Hi,

    that’s a good start.

    If you now give an extra CSS class to the left wrapper (for example tablepress-left-wrapper), you could use some CSS like

    .tablepress-left-wrapper {
  margin-left: 150px;
}

    Regards,
    Tobias

    Thread Starter m.nelson0100

    (@mnelson0100)

    12 years, 5 months ago

    Thanks so much, got it!. I was not correctly applying the name to the wrappers. After individually distinguishing the 2 it worked, thanks to you!

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    12 years, 5 months ago

    Hi,

    no problem, you are very welcome! 🙂 Good to hear that this helped!

    Best wishes,
    Tobias

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

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Side by Side’ is closed to new replies.