Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • August 6, 2018 at 3:57 pm #993965
    FloppySocks

    Hey Kriesi team,

    I have some fairly large tables that I’ve coded with HTML and placed into code blocks. On mobile, these tables get cut off and appear to go off the screen. Is it possible to assign a horizontal scroll class to these, so they’d work similarly to how the scrolling table setting works within the Avia Layout Builder tables?

    What I’m describing can be seen here: https://bardac.com/dc-drives/pl-series/#4quad

    I use code blocks on nearly every page of my site and would prefer not ALL code blocks become scrollable…just those with tables.

    Thanks!
    – Julian

    August 7, 2018 at 5:46 am #994216
    Ismael

    Hey FloppySocks,+

    Thank you for using Enfold.

    Add this css code to make the tables scrollable.

    .avia_codeblock_section, .avia_codeblock_section table {
    overflow-x: scroll;
    width: 100%;
}

    Best regards,
    Ismael

    August 8, 2018 at 4:01 pm #995029
    FloppySocks

    Thanks very much Ismael, and sorry for the simple request. I was also able to get decent results as well by creating a div around the table.

    <div style="overflow-x:auto;”>
</div>

    As always, thanks for your time. Please close the thread!

    August 8, 2018 at 5:08 pm #995076
    Nikko

    Hi FloppySocks,

    Glad that Ismael helped you :)
    Feel free to comeback if you need further assistance.
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Horizontal scrolling table on HTML overflow’ is closed to new replies.