Flipping Table: Showing Very Wide Table on Phone

Most of the mobile phones have vertical screen, so building a mobile website where user needs to scroll horizontally frequently is a No. Thus, it is not a good idea to have HTML tables which are very wide, especially those have text-boxes and many other fields for user to fill in as shown below.

Before Flipping Table
Have to scroll horizontally to fill up information in a wide table

After the first version of the mobile website is done, I now focus on making the columns of the wide tables to be shown vertically, like the one shown below.

Columns now become rows
Columns now become rows

It is done using CSS. I like the solution very much because unlike some other solutions which require changes done to the ASPX, this solution with CSS will not affect the C# code behind.

The CSS part is quite straight-forward. The idea is just to make each cell of every row to show line by line in the row. After that, the name of the columns will be placed in front of each line:

Fliptable CSS
The rest of the CSS is just adding header text to each row

There is an advanced solution posted online where the table can actually decide the layout itself based on the screen size: http://css-tricks.com/responsive-data-table-roundup/. That advanced version allows the user to get different look-and-feel on different devices. However, I somehow could not get it to work on my ASP website. Thus, I modified it to a simpler version as shown above.

Oh yeah, the CSS above does not work in Internet Explorer. According to a discussion on Stack Overflow, adding “float: left” to .fliptable td seems to solve the problem (at least in IE9).

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s