Side by Side Tables

  • Resolved matlas44

    (@matlas44)


    8 years, 6 months ago

    Hello,

    In the attached page in the accordion that reads “Costs and Scholarships” I have two Tablepress tables. At one point, they were side by side, using the following CSS code:

    .tablepress-id-130,
    .tablepress-id-78 {
    float: left;
    margin-right: 10px;
    }

    As I have done with several tables and it was fine. I was trying to add two new tables on a different page and found that I could not put them side by side and I looked and saw that the other tables with this CSS code are no longer side by side. The only change I made over ALL tables was editing the tablepress-responsive-tables/tablepress-responsive-tables.php to all scroll in responsive mode.

    How can I get my tables to be side by side? I tried following the instructions here but I didn’t get very far: https://ww.wp.xz.cn/support/topic/tables-side-by-side/

    The code was essentially the same…

    Thanks!

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

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

    (@tobiasbg)

    8 years, 6 months ago

    Hi,

    thanks for your question, and sorry for the trouble.

    Showing tables next to each other, and having the scroll mode will probably not work nicely.

    You could try adding this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .tablepress-scroll-wrapper {
    float: left;
}

    Regards,
    Tobias

    Thread Starter matlas44

    (@matlas44)

    8 years, 6 months ago

    Thanks Tobias,

    For which tables? I have multiple… I don’t want this to be applied to ALL tables. I tried this but it did not work:

    .tablepress-id-143-scroll-wrapper {
    float: left;
    }

    .tablepress-id-144-scroll-wrapper {
    float: right;
    }

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    8 years, 6 months ago

    Hi,

    ah, true…. As these use HTML IDs, try

    #tablepress-id-143-scroll-wrapper {
  float: left;
}

#tablepress-id-144-scroll-wrapper {
  float: right;
}

    Regards,
    Tobias

    Thread Starter matlas44

    (@matlas44)

    8 years, 6 months ago

    Thanks but that still didn’t work…
    I would really like them to be on the same line on the page below (that’s the one with these two tables) under Estimated Cost of Attendance for Graduate Students

    https://overseas.huji.ac.il/academics/international-graduate-programs/fees-and-refunds-division-of-graduate-studies/

    Thanks!

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    8 years, 6 months ago

    Hi,

    please try with

    #tablepress-id-143-scroll-wrapper {
  float: left;
  width: 49%;
}

#tablepress-id-144-scroll-wrapper {
  float: right;
  width: 49%;
}

#tablepress-id-144-scroll-wrapper + h2 {
  clear: both;
}

    Regards,
    Tobias

    Thread Starter matlas44

    (@matlas44)

    8 years, 6 months ago

    Argg it didn’t work! I even tried adding “!important” and it still didn’t work!

    I used to be able to do this!

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    8 years, 6 months ago

    Hi,

    ah, we have a typo in the selectors:

    #tablepress-143-scroll-wrapper {
  float: left;
  width: 49%;
}

#tablepress-144-scroll-wrapper {
  float: right;
  width: 49%;
}

#tablepress-144-scroll-wrapper + h2 {
  clear: both;
}

    Regards,
    Tobias

    Thread Starter matlas44

    (@matlas44)

    8 years, 6 months ago

    Much better thanks!
    Now this would be a bonus…
    In mobile mode I don’t want them on the same line – so if someone is on their phone I want them to see the one on the right after the one on the left – is that possible?

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    8 years, 6 months ago

    Hi,

    yes, with a CSS3 Media Query:

    @media screen and (max-width: 800px) {
  #tablepress-143-scroll-wrapper,
  #tablepress-144-scroll-wrapper {
    float: none;
    width: 100%;
  }
}

    Regards,
    Tobias

    Thread Starter matlas44

    (@matlas44)

    8 years, 6 months ago

    Amazing thanks!

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    8 years, 6 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!

    Thread Starter matlas44

    (@matlas44)

    8 years, 6 months ago

    What about on this page:
    https://overseas.huji.ac.il/academics/undergraduate-programs/ugrad-usap/
    In the “Costs & Scholarship” accordion? I tried the same thing and it didn’t work (they were not on the same line.

    Thanks!

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    8 years, 6 months ago

    Hi,

    you need to use the same new code scheme as from above, because you are also using the horizontal scrolling here.

    Regards,
    Tobias

    Thread Starter matlas44

    (@matlas44)

    8 years, 6 months ago

    You mean just this:

    @media screen and (max-width: 800px) {
    #tablepress-143-scroll-wrapper,
    #tablepress-144-scroll-wrapper {
    float: none;
    width: 100%;
    }
    }

    ???

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    8 years, 6 months ago

    Hi,

    that and the previous code, both with the correct table IDs, of course.
    That has to replace the current code that affects those tables.

    Regards,
    Tobias

Viewing 15 replies - 1 through 15 (of 35 total)
1 2 3

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

Tags