title: dynamically alter html tables to display on mobile
body: <p>I am creating a mobile optimized website that is dynamically created by recognizing a request from a mobile device, manipulating the existing page to be mobile optimized using php and the html parser, <a href="http://querypath.org/" rel="nofollow">QueryPath</a>. 
  Some of the pages I plan to manipulate contain html tables, such as <a href="https://www.fsb.muohio.edu/fsb/content/programs/international-study/summer-programs/china/accepted/language/c1.htm" rel="nofollow">this one</a>, which to don't display well on mobile.  </p>
  
  <p>I am looking for a function that can handle any html table of any amount of rows and columns and manipulate it so it will show up well formatted on a mobile device.  I am using the jquery mobile framework. </p>
  
  <p>a solution in either php or javascript/jquery would be great. </p>
  
  <p>Here is a jsFiddle of what I mean: <a href="http://jsfiddle.net/jdv590/yVJ6m/3/" rel="nofollow">Link</a></p>