Published on Thursday, June 6, 2013

Responsive Design at the Table Level

Co-founder Phil Wegrzyn applies jquery magic to view tables on a phone

Co-Founder and long-time contributor to tech-talks at the Chicago Area DotNetNuke User Group, Phil Wegrzyn showed us how to add style sheet and jquery code to transform a wide multi-column table into a clean display for iPhone or Android.

Using the techniques presented, one can shrink a multiple-column table down to 2 - a data column and an expand button. It's a very eloquent way of displaying complex tabular info on a small screen device.

This presentation was given at the June online meeting of the Chicago Area DotNetNuke User Group. Don Gingold introduces Phil and then asks a few questions from the audience.

Rate this article:

No rating

Comments (2)Number of views (20572)

Author: Don Gingold

Categories: Chicago Area DotNetNuke Users Group

Tags:

Don Gingold

Co-Founder and Managing Director of Sprocket Websites, Inc.; Co-Founder Chicago Area DotNetNuke User Group

Founders

Chicago Area DotNetNuke Users Group Founding Members

2 comments on article "Responsive Design at the Table Level"

Phil Wegrzyn

6/6/2013 9:52 PM

if you want to try this demo online, its available at

http://customportalsolutions.com/Demos/ResponsiveTable.aspx

in FF or Chrome, shrink the width of the page and you will see the responsiveness of the table, or check it out on a full size browser, and then on a mobile phone.

Reply to

Don Gingold

6/19/2013 10:22 PM

Thanks, Phil.

Reply to

Name:	Please enter a name.
Email:	Please enter a email address. Please enter a valid email address.

Comment:

Add comment