Mobile-Friendly Tables

Mobile friendly tables

The following table is automatically imported from IRIS (institutional research information system).
It 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.

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.