How can I force an HTML table to rotate 90 degrees / "go vertical" on a small device?

Question

I have a need to create an HTML table (or something like it) that contains true tabular information, such as:

First name, Last name, Address 1, Address 2, City, State, Zip

And so, this data, to be readily grokked, should be kept together on a single line/row.

For small devices (phones), though, to do that would cause the text to be exceedingly small, and I want to "flip" the orientation of the table so that it can be viewed with the device held in "landscape" mode. IOW, the user will be forced to either rotate their phone or play funny tricks with their eyes.

How can that be done - proactively switch the orientation of the table from "portrait" to "landscape" when the device is small, and keep it locked in that orientation regardless of what gyrations the phone-user makes with his device?

Answer 1

Perhaps using media queries to detect the orientation or simply width and setting transform:rotate(90deg) could work.

This post may also be relevant/helpful: Blocking device rotation on mobile web pages