Passion & Opportunity ? continue : break

How to make a rotatable table?

Written: 2019-03-06 16:20:02Last update: 2019-06-16 11:19:48

These days, Responsive Web Design (RWD) is playing important role for webmasters,
we used to read the word 'responsive web' then we alread read many times about 'mobile first' design
and then recently we read a few times about 'mobile only' design,
it is confusing about those 3 designs because people have different needs based on their visitors/customers.
No matter which design we choose,
the ability to adjust our web layout and content for various screen sizes is very important.

One of the most troublesome to handle 'layout' for tabular data content is the <table> tag,
there are some ways to make 'responsive table' (ie: ability to joined some columns as one to reduce width),
there are some articles out there to described the ways and each pros/cons.

This short article will only show how to create 'rotatable table',
it can change the header's orientation between landscape and portait depending on viewport (viewing area) width.
To avoid misunderstanding regarding 'rotatable table' definition,
below is the definition that I use for this short article

Only use native <table>, <thead>, <tr>, <th>, <td> tags (don't use any <div> or <span> tags to define cell areas).

Header area will be always visible (sticky) even when the content is scrolled very far.

Header location may be rotated between 'landscape' (horizontal) and 'portrait' (vertical) depending on viewport width,
if viewport width is enough then header will be positioned on the top horizontally and content may scroll up and down,
but if viewport width is not enough then header will be positioned on the left vertically and the content may scroll left and right.

DEMO NOTE:

To see the table header changing between top side (landscape) and left side (portrait),
we need to adjust the width of our browser with mouse OR change our tablet's orientation from portrait to landscape and vice versa.

To show table header always visible (sticky) in this demo, I on purposely set smaller limit of the table width and height,
so then we can scroll the content but still see the header columns are always visible.