Responsive tables that stack

Question

We are doing a responsive website using Magento v1.8 and am running into an issue making the header responsive. I have tried with div, and not been able to make it work. I went to the table method and have it 1/2 way there, but stilling running into some issues.

This is what I am looking to accomplish :

[___Logo____][___Search_____][___Cart_____] (100% screen width)

As the resolution (mobile/table) have it change to

[___Logo_______]

[___Search_____]

[___Cart________]

As it stands now, it will collapse 3/4 of the way and the cart is off the screen, if I shrink it down all the way, then they stack (though the alignments are off.

Here is what I have so far :

<style>


@media screen and (max-device-width: 600px), screen and (max-width: 600px) {
*[class=headermobilewrapper]{width:100%!important; height:auto!important;}
*[class=w320]{width:320px!important; height:auto!important;}
*[class=split]{width:320px!important; float:left!important; display:block !important;}  



</style>


 <?php $config = Mage::getStoreConfig('themessettings', $_GET['store']); ?>


 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="headermobilewrapper" align="center" bgcolor="#f3faf0">
   <tr>
     <td style="vertical-align:middle" class="split"> <a href="http://dev2"><img src="/images/header/header_logo.gif" ></a> </td>
     <td style="vertical-align:middle" align="center" class="split"> <?php echo $this->getChildHtml('topSearch'); ?> </td>
     <td style="vertical-align:middle" align="center" class="split"> <?php echo $this->getChildHtml('cartTop') ?> </td>
   </tr>
 </table>

I have no problem changing formats, styles, etc. I have tried almost all of the methods I found on Google, and here, though either I am doing something wrong, or maybe what I am looking to achieve is just not there yet.

Answer 1

You should just apply to table, td, tr display: block

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
    table, tr, td {
        display: block;
    }
}

http://jsfiddle.net/3ernd8up/