html - How to make change in this post title table with css? -

this html code-

<table style='min-width:60%;height:25px;'>     <tr>         <td><data:post.title></td>         <td id='date-and-author' style='position: relative;bottom: -2px;white-space:nowrap;'><data:post.author><data:post.dateheader></td>     </tr> </table>

this gives following result-

how make html table      admin on 8/1/13

can see title, admin , date in 1 line. problem is, when device has maximum width of 480px 'by admin on 8/1/13' run out of 100% window size. if make white space= normal in id #date-and-author displayed like:
by admin
on 8/1/13
not good. want, when device has maximum width of 480px 'by admin on 8/1/13' displayed in new row. css should place in @media screen , (max-width:480px){..} that, id #date-and-author displayed in new row as:

how make html table
admin on 8/1/13

don't want use div element. please me.

you can tell td display table row (but need apply both tds gave first td , id too, or assign tds within table):

<table style='min-width:60%;height:25px;'> <tr>     <td id='title'><data:post.title></td>     <td id='date-and-author' style='position: relative;bottom: -2px;white-space:nowrap;'><data:post.author><data:post.dateheader></td> </tr> </table>  @media screen , (max-width:480px){     td#title, td#date-and-author { display:table-row; } }