Table and accordion

mizlatic · March 2020

Dear Pablo if i put table HTML inside accordion it looks good on desktop, laptop but on mobile device i cannot see entire table it just show part of my table and i canot scroll horizontally

mizlatic · March 2020

The same thing happens if i put table inside column element or accordion

mizlatic · March 2020

One more thing to help if i turn my mobile phone horizontally it shows good table but when i turn my mobile phone verticaly it cuts table i am using hosting template

Pablo · March 2020

Hello,

This is default behavior, because tables are not responsive by the default.

What I mean, tables usually have a lot of informations inside, so if you will have really small screen, it should not break or decrease the font size, because it will be not readable.

What you should do, is to change the layout or create a section for a mobile only (other layout too) using the "Responsive Visibility" in the section settings - it will allow you to hide some elements on desktop/tablet/mobile only.

Thanks

mizlatic · March 2020

But i want to have scroll when table is big

mizlatic · March 2020

How it is good visible on horizontall mobile phone view i cannot hide that element it need to be there

mizlatic · March 2020

I found this code in responsive.css

/* Table */

.table-responsive table{overflow-x:auto;display:block}

.table-responsive table a.kill_the_icon .button_icon{display:none}

Pablo · March 2020

Can you send me a link to your website?

Thanks

mizlatic · March 2020

It is on localhost but i found some kind of solution is this ok

In responsive.css i added this line of code

@media only screen and (max-width: 480px){

.wrapper-scroll{

overflow-x:auto;

}}

And then when I make HTML table i add div tag in front called <div class="wrapper-scroll"><table></table></div>

Pablo · March 2020

Glad to hear that you solved it out.

If you have some other questions, feel free to ask.

Thanks

ssgsfm · March 2020

i can confirm mizlatic's solution worked for me too. It should have been a default thing. I added css in Customs CSS field on muffin builder page options.

Table and accordion

Comments