Tables and Horizontal Scrolling - jQuery Mobile

I am currently writing an app using PhoneGap and jQuery Mobile. One of the functions of my app is to pull data from a website and append it onto the page. However, part of the data includes a table which gets cut off on my Android (the table is too wide to 开发者_StackOverflow社区fit). The solution would be to implement a horizontal scroll bar, but I am having trouble doing such.

Any suggestions?

EDIT: This is what it looks like on mobile. This is what it looks like on my desktop

Anyway to scroll to the right (x)?

EDIT 2: It's not my HTML I am formatting. I am basically taking the HTML from a successful ajax GET call and dumping it onto the page

$('#insert').html(raw_output);

Unfortunately, the HTML/CSS of the table is not very good. I could rewrite most of it using jQuery .css, but the quicker and functional solution would just be to add a horiz-scrolbar allowing me to increase spacing on the table.

Try putting the table into a div, and set the css of the div to "overflow: auto" or "overflow: scroll". You can change "overflow" to "overflow-x" or "overflow-y" if you only want it to scroll in one direction. "Scroll" will show a disabled scrollbar even if there's no overflow; "auto" will not show anything if there's no overflow, but will show a scrollbar once there is.

You can try the following http://jsfiddle.net/9zuxH/21/

Thanks Phill Pafford

Looking at your images, I don't recommend horizontal scroll for your table because the screen looks bad and unprofessional already. Display all of the details of a course in a separate page. For example, course number, time, probably instructor (maybe all in a column) and button would look better. Touching/clicking a row (or a button) would lead to its details.