The idea of this page is to demonstrate a css & js trick that stops tables from overflowing on mobile, and displays them in a special non-overflowing styling instead.
You can read more about this on the project's GitHub page.
If you are on mobile, you can switch to desktop view (probably somewhere in the hamburger menu) to see how the demo looks on desktop.
If you are on desktop, you can use Ctrl+Shift+I to get a console window, in which you can then choose to see the page in a mobile-like size.
Demonstration table 1 (lots of text):
Firstname | Lastname | Age |
---|---|---|
Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill | Smith | 50 |
Eve | Jackson | 94 |
Demonstration table 2 (some images):
image 1 | comment | image 2 |
---|---|---|
![]() |
foo bar |
![]() |
See here to see how this would behave without our css & js trick!