Adjusting the size of table so that response scrolling is not needed on mobile

Hi,

thanks for your question, and sorry for the trouble.

I see what you mean, but this not really possible like that, due to how tables on the web work. They have a fixed column structure that can not directly be broken (to e.g. show the columns underneath eachother, instead of next to each other).

The width of the columns in your table is basically restricted by the long word “Animations” in the header row. That word determines how wide the column is. If you want the columns to be smaller (so that the entire table fits on a small screen like an iPhone), you will have to make that word shorter. You could e.g. reduce the font size (but then it will be hard to read), or maybe add hyphens (-) in it, where the browser can add word-wrapping. That will however also look ulgy, especially on bigger screens…

So, for that table, the scrolling is the best choice. If that really bothers you, you will have to move to other (custom) HTML structures (e.g. with <div>s, etc.) and more custom CSS.

Regards,
Tobias