html - How would I resize a table with text in it? -

html - How would I resize a table with text in it? -

i can table resize when view in on mobile text breaks in middle of word , unreadable. wondering if there way create table remain horizontal on computer create vertical when viewed on mobile.

here have:

table { width: 100%; table-layout: fixed; border: 1; border-color: dedede; text-align: left; } table td { word-wrap: break-word; font-size: 100%; } .ifineprint { font-size: 12px; text-align: center; } <h2>iphone repair</h2> <table rules="cols" frame="vsides"> <tr> <td> iphone 4 <ul> <li>cracked screen</li> <li>battery replacement</li> <li>rear panel</li> </ul> </td> <td> iphone 4s <ul> <li>cracked screen</li> <li>battery replacement</li> <li>rear panel</li> </ul> </td> <td> iphone 5 <ul> <li>cracked screen</li> <li>battery replacement</li> </ul> </td> <td> iphone 5s <ul> <li>cracked screen</li> <li>battery replacement</li> </ul> </td> <td> iphone 5c <ul> <li>cracked screen</li> <li>battery replacement</li> </ul> </td> </tr> </table> <p class="ifineprint">*prices depend on work beingness done. if more info may fill out contact form, email directly, or phone call number provided.</p>

http://jsfiddle.net/omyhmcp6/

as can see table remains 100% width text gets broken. help.

you can seek adding media query, turning table simple bunch of divs on narrower screens...

@media (max-width:500px) { td, tr, table{display:block} }

see http://jsfiddle.net/omyhmcp6/2/

html css