Inserting a table into the Corestone Website Builder

[h08meric]

Hi,

I am building a Pricing page here: http://new.calamiaresort.com/packages/rates/

I want to insert a table in the Corestone Website Builder and used the WP Plugin Tablepress and inserted the Shortcode using the “Classic raw content” element. This looks good on a computer, but it gets cropped and you cant see the whole table on a mobile phone.
How can I make this table look good on a mobile phone? With CSS?

Or is there a better way to create a table with the website builder, that looks like the table I already created on the page?

Thank you so much!

kind regards
Maria

[Prasant]

Hello Maria,

Thanks for asking.

The problem you are facing with tables is similar to this thread. Please take a look at solution mentioned in following thread.

Table responsive

Thanks.

[h08meric]

Hi,

Thank you for your reply. I inserted the CSS, but it didnt help. The text is smaller, but the table is still being cropped and not shown in full width.

Any other tips on how to show the full table?

Thank you!

Kind regards
Maria

[paul.r]

Hi Maria,

You can activate horizontal scroll by adding a div wrapper.

eg.

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

For more information kindly refer to the link below

https://www.w3schools.com/howto/howto_css_table_responsive.asp

Responsive Data Tables | CSS-Tricks

Hope that helps.

[h08meric]

Ok,and where do I add the div wrapper?
This is not in the CSS, so where do I insert the code

Thank you so much!

Maria

[christian]

Hey Maria,

Though the solutions provided previously will help, they will require you to do custom development and that is outside the scope of our support. With that said, I will only show @paul.r suggestion to achieve a scrollable (not responsive) table. @Prasant’s suggestion to use media queries because that could go from simple to complex especially for tables.

Please watch this video at https://youtu.be/bMANMFj8jc8 to see how Paul’s suggestion will work.

X and all its elements are responsive. It is the TablePress table that is not. X does not currently offer responsive tables so I’d recommend that you check out other third party table plugins that has a responsive display. Or, check TablePress’ own Responsive Table extension at https://tablepress.org/extensions/responsive-tables/

Please watch this video at https://youtu.be/EUr3mbcaP1w for a better explanation

Hope that helps.