Geeks With Blogs

expression{web.blog} Thoughts on Expression Web and web tools in general

Many of the sites I work with have pages displaying tables of data; insurance claims, medical data, membership lists, sports results etc. When I started moving to responsive layouts to give cross-device compatibility, some of these tables didn't fit on mobile portrait screen sizes.

My initial solution was to hide them on the portrait screen and display a note 'Please view this page in landscape'. This wasn't very elegant and fell down immediately when a table was too wide for landscape view as well.

After some head scratching I realised I could selectively hide table columns and the solution was simple. Having decided which columns of the particular table were most significant I could hide several of them in mobile portrait view, hide fewer in landscape view and display them all for tablets upwards.

For example, two basic classes can be used for portrait (.hiddenCol1) and landscape (.hiddenCol2), using the responsive breakpoints:

/* mobile portrait is my default (mobile first) */
.hiddenCol1, .hiddenCol2 {
display:none;
}

/* mobile landscape*/
.hiddenCol1 {
display:table-column;
}

/*tablet and upwards/*
.hiddenCol1, .hiddenCol2 {
display:table-column;
}

Apply these styles to the complete column, (header and column cells). If using a GridView, apply the CssClass to the HeaderStyle, ItemStyle and FooterStyle (if needed).

Note: Having arrived at this solution independently, I see that others have done the same thing. Necessity is clearly the mother of invention.........

 

Posted on Thursday, December 27, 2012 10:04 PM | Back to top


Comments on this post: Responsive Tables - a simple solution

No comments posted yet.
Your comment:
 (will show your gravatar)


Copyright © ihaynes | Powered by: GeeksWithBlogs.net | Join free