Tables side-by-side

  • Resolved Lukosius

    (@lukosius)


    8 years, 7 months ago

    Hi there,

    You will see that this page has three tables, all centered. I need to have to first two tables side-by-side, but can’t work out how to do it.

    The HTML I have on the page is….

    <div align=center>[table id=20149 responsive=scroll /][table id=22149 responsive=scroll /][table id=21149 responsive=scroll /]</div>

    Thanks.

    The page I need help with: [log in to see the link]

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

    (@tobiasbg)

    8 years, 7 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    This is possible with CSS code. For some approaches, please see https://ww.wp.xz.cn/support/topic/show-tables-next-to-each-other/

    As you are using the scroll mode, you could actually re-use the <div> wrappers that this adds.

    Regards,
    Tobias

    Thread Starter Lukosius

    (@lukosius)

    8 years, 7 months ago

    Thanks for that. I’m almost there…..

    http://www.goldfieldsgiants.com/players/holmen-jacob

    I now have the first two tables side-by-side, followed by the 3rd table underneath, which is how I want it. However I need the top two tables to be ‘centered’ like the 3rd table is.

    I have added the following….

    PLUGIN OPTIONS:
    —————————————-
    .tablepress-wrapper1 {
    width: auto;
    float: left;
    padding-right: 15px;
    }

    .tablepress-wrapper2 {
    width: 100%;
    float: left;
    }
    —————————————-

    ON THE PAGE ITSELF:
    —————————————-
    <div class=”tablepress-wrapper1″>

    [table id=20149 responsive=scroll /]

    </div>

    <div class=”tablepress-wrapper1″>

    [table id=22149 responsive=scroll /]

    </div>

    <div align=center class=”tablepress-wrapper2″>[table id=21149 responsive=scroll /]</div>
    —————————————-

    Any suggestions to center those top two tables?

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    8 years, 7 months ago

    Hi,

    you would need to give a width to the wrapper elements, using width: auto; doesn’t give you enough freedom. Alternatively, you could add left margins, for example.

    I recommend playing around with this in the Developer Tools of your browser, this will be the quickest.

    Regards,
    Tobias

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

The topic ‘Tables side-by-side’ is closed to new replies.