Tables are Not Responsive

[astroluxxe]

I have two tables displayed side by side. The tables are not resizing responsively. Is there anything I need to keep in mind when laying out the page to avoid this overlap from happening. I should mention that I have 7 columns shown and I know the shortcode only allowed for 6. Is that part of the problem?

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

I’m afraid tables as HTML are not possible to make responsive. The cells can only be as narrow as the content inside, once it gets to that point they will stop resizing

– Kyle

[astroluxxe]

I’m not sure about that. Look at Foundation and Bootstrap, they both have a responsive solution to tables. Are you saying that the tables in your theme were not designed to be responsive?

[Kyle – SUPPORT]

Our theme is built on bootstrap, we use the exact same tables. However if you look at the one on their site you will see the words in the cells are single words, and very short, that’s why it can get as small as phone (see screenshot)

However when using a lot of columns, with longer words inside, the table can only shrink to the width of the content within. Think about it, what do you expect tables to do when it has scaled down to a point were there is no padding in the table cells? They can’t fold stack on top of each other like divs

– Kyle

Attachments:

You must be logged in to view attached files.

[Ian]

astroluxxe

May I suggest a plugin I use for powerful responsive tables.
http://themergency.com/footable/

[Swift Ideas – Ed]

Thanks for sharing the link Ian!