I have a table with two column that looks like so.

Which is what I need it covers the space available which is about 1000px. However my problem is when I view it on a mobile device iphone for example. The table instead of breaking after each item just squeezes the table to fit the screen which is what I imagine it is configured to do. What would be the best way to instead of squeezing the table to fit making the table change its layout. The only thing I can think of is checking the device type and creating the table through javascript, regularly if not a mobile device and changining table to one column with multiple rows if mobile.
Would this be the best way to do this?
First of all stop using tables for layouts, use new HTML5 semantic tags which will not only fix these issues but will also help you with the SEO, and use the power of pure CSS, learn CSS positioning, floats, and how to design responsive layouts, if you want different layout for different devices than use
@media queriesMedia Queries Reference