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.
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.
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:
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).