Wrap cells in tables

[AlienKevin]

1. Prevent table overflow in desktops

I like how my table looks in the ghost editing page:

However, the table overflows when shown on the website:

I like that there's more space separating each column when displayed on the website, but when there are too many columns, I think a better behavior will be to condense the table with narrower gaps and wrap contents in cells more if necessary to avoid overflow

2. Wrap cells in mobiles

I like your design of a fully responsive table in mobile which holds the headers stationary.

However, I think it would be better if all content in one cell be wrapped so that they are all visible without horizontal swiping.

[huangyuzhang]

@AlienKevin as you posted, the default ghost editor is much wider than the post content area. It would be difficult to see if we squeeze everything into the content area. However, for those posts have wide content you might want to use the "Full Width" layout. To enable that, simply go to the post editing page, click the gear icon at the top right corner. Then scroll down to select the Full Width from template.

Actually, it would be a bad idea to show tables in mobile devices. But sometimes we have to do that, so for mobile devices I used the horizontal slide as you have seen.

I am planning to improve the post display after v1.0.0 (e.g. horizontal scrolling in desktop too). In the meanwhile, please feel free to implement other better table layouts and discuss in here.

[AlienKevin]

Thanks for your detailed reply! I will try your suggestions.

[huangyuzhang]

Thanks for your detailed reply! I will try your suggestions.

@AlienKevin You are welcome. And for such a long post, you might want to enable Table of Content for the page or even enable for the whole website. doc here