CODEWITHSUNDEEP
htmlresponsive-designhtml-table
Alan MX
Alan MX

Reputation: 1

Tables not stacking in mobile

I'm trying to make a table which has one row of four cells turn into two rows of two cells on a mobile.

I've tried a number of solutions I've searched for, but none seem to be making it happen.

This is the code I'm working with:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td align="center" valign="top"><img style="display:block" float: "left;"  src="http://cdn11.my-wardrobe.com/images/emailers/MOO.COM/moo-luxeproject-kidyeah-24.jpg" width="150" height="100" /></td><td align="center" valign="top"><img style="display:block" src="http://cdn11.my-wardrobe.com/images/emailers/MOO.COM/moo-luxeproject-kidyeah-23.jpg" width="150" height="100" /></td>
                  <td align="center" valign="top"  style="font-size: 0; line-height: 0;"><img style="display:block" src="http://cdn11.my-wardrobe.com/images/emailers/MOO.COM/moo-luxeproject-kidyeah-21.jpg" width="150" height="100" /></td>


                  <td align="center" valign="top"><img style="display:block"  src="http://cdn11.my-wardrobe.com/images/emailers/MOO.COM/moo-luxeproject-kidyeah-19.jpg" width="150" height="100" /></td>
                </tr>
              </table>

It's just driving me bananas and I'm getting desperate

Upvotes: 0

Views: 209

Answers (1)

Lizzie
Lizzie

Reputation: 11

you want to use floats and divs rather than tables when stacking for mobile.

To achieve the initial row of four column blocks, you will need two wrapper divs, one which floats left and one which floats right, and within each wrapper div, a left and a right float. Then the whole row gets wrapped in a container div so that you can position your row relative to the rest of the page.

When you stack, use the media query to clear unecessary floats, and reset the widths of the columns in the new stack. Setting the width of the left/right wraps to 100% will effectively split the single full width row into two full width rows.

    <div id="wrap">
      <div id="leftwrap">
       <div id="colone">
         ... content of column one goes here ...
       </div>
       <div id="coltwo">
         ... content of column two goes here ...
       </div>
     </leftwrap>
     <div id="rightwrap">
       <div id="colthree">
         ... content of column one goes here ...
       </div>
       <div id="colfour">
         ... content of column two goes here ...
       </div>
     </rightwrap>
     <div id="clear"></div>
   </div>

Then in your CSS:

    #wrap { width: 100%; }
    #leftwrap { float: left; width: 50%; }
    #rightwrap { float: right; width: 50%; }
    #colone { float: left; width: 50%; }
    #coltwo { float: right; width: 50%; }
    #colthree { float: left; width: 50%; }
    #colfour { float: right; width: 50%; }
    #clear { clear: both; }
@media only screen and (max-width : 900px) {
    #leftwrap { float: none; width: 100%; }
    #rightwrap { float: none; width: 100%; }
    #colone { float: left; width: 50%; }
    #coltwo { float: right; width: 50%; }
    #colthree { float: left; width: 50%; }
    #colfour { float: right; width: 50%; }
}

Upvotes: 1

Related Questions