Mobile friendly tables

The following table is too wide for mobile phones (in portrait mode).  When viewing it on a phone, the right-hand side of the table is off-screen and you cannot view it.

However, if you add a 'Mobile-Friendly Tables' content type, all this is fixed.  You can swipe sideways to view the whole table.  You can also opt to flip the table on small screens (turning the rows into columns and vice versa) for easier reading.

To view this page in mobile view do the following:

  • Firefox: Press Ctrl-Shift-M
  • Chrome: Press Ctrl-Shift-I (to launch the inspector), and then Ctrl-Shift-M (to switch to mobile view)
  • Opera: Press Ctrl-Shift-I (to launch the inspector), and then Ctrl-Shift-M (to switch to mobile view)
  • Safari: Press Command-Option-R (only works if the developer menu has been made visible in the menu bar.  Do this in Preferences - Advanced)
  • Edge: Press F12 to launch 'Developer Tools',  choose 'Emulation' from its top menu,  and select a device.
  • IE: Press F12 to launch 'Developer Tools', choose the 'Emulation' tab, and select  'Windows Phone' in the browser drop-down list.
1st header 2nd header 3rd header 4th header 5th header 6th header 7th header 8th header 9th header 10th header
This is the 1st column's content This is the 2nd column's content This is the 3rd column's content This is the 4th column's content This is the 5th column's content This is the 6th column's content This is the 7th column's content This is the 8th column's content This is the 9th column's content This is the 10th column's content
This is the 1st column's other content This is the 2nd column's other content This is the 3rd column's other content This is the 4th column's other content This is the 5th column's other content This is the 6th column's other content This is the 7th column's other content This is the 8th column's other content This is the 9th column's other content This is the 10th column's other content

There is also another version of this content type: 'Mobile Friendly Tables: Sticky First Column'.  This does everything described above but also ensures the first column of the table is always visible, as you scroll sideways.  For this to work, the table has to display each field on a single line, so it's only good for tables with terse content.