Problem with aligned tables for responsive design

I'm currently making a mailing with aligned tables that fall in line on mobile as many are doing these days, but I'm running into a strange issue that I can't seem to figure out for some reason.

Currently the tables aren't behaving in the way that I would expect them to and I'm looking for some assistance if anyone can provide it. Here is a quick little example:

<table width="600" align="center" cellspacing="0" cellpadding="0" border="0" style="width:600px;">
    <tr>
        </td>
            <table width="298" height="50" cellspacing="0" cellpadding="0" border="0" align="left" style="width:298px;height:50px;border:1px solid #000000">
                <tr>
                    <td>Column 1</td>
                </tr>
            <table>
            <table width="298" height="50" cellspacing="0" cellpadding="0" border="0" align="left" style="width:298px;height:50px;border:1px solid #000000">
                <tr>
                    <td>Column 2</td>
                </tr>
            <table>
            <table width="298" height="50" cellspacing="0" cellpadding="0" border="0" align="left" style="width:298px;height:50px;border:1px solid #000000">
                <tr>
                    <td>Column 3</td>
                </tr>
            <table>
            <table width="298" height="50" cellspacing="0" cellpadding="0" border="0" align="left" style="width:298px;height:50px;border:1px solid #000000">
                <tr>
                    <td>Column 4</td>
                </tr>
            <table>
            <table width="298" height="50" cellspacing="0" cellpadding="0" border="0" align="left" style="width:298px;height:50px;border:1px solid #000000">
                <tr>
                    <td>Column 5</td>
                </tr>
            <table>
        </td>
    </tr>
</table>

As you can see the aligned tables are located in container table with a size of 600. Now the way I expect this to function is that the aligned tables would respect the container tables size and fall below if there isn't enough space for the table. Instead I'm getting behavior like this:

http://i.imgur.com/VMgwjdC.png

Where each table just stacks in one row and ignores the container tables width. I'm kind of at a loss at what to do at this point. I made an even bigger mess with right aligning them, as it was just a pile of overlapped tables. Any advice would be great appreciated.

roshodgekiss roshodgekiss, 3 years ago

Hi LandoCalrissian, the reason for the tables not stacking properly was likely that there was invalid HTML code in your snippet - for example, none of the inner tables were closed using </table>. It's worth getting your code validated from time to time, to catch mistakes like this :)

I've refactored the code a little to ensure this stacking does occur on mobile devices - hopefully this will give you a few pointers on building responsive layouts, too :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Table stacking demo</title>
<style type="text/css">
table#container { border: 1px solid #FF0000; }
table.floattables { border: 1px solid #000000; }

@media screen and (max-width: 480px) { 
    table[id=container] { width: 320px !important; }
    table[class=floattables] { float: left; }
}

</style>
</head>
<body>
<table width="600" align="center" cellspacing="0" cellpadding="0" border="0" id="container">
  <tr>
    <td><table width="298" height="50" cellspacing="0" cellpadding="0" border="0" align="left" class="floattables">
        <tr>
          <td>Column 1</td>
        </tr>
      </table>
      <table width="298" height="50" cellspacing="0" cellpadding="0" border="0" align="left" class="floattables">
        <tr>
          <td>Column 2</td>
        </tr>
      </table>
      <table width="298" height="50" cellspacing="0" cellpadding="0" border="0" align="left" class="floattables">
        <tr>
          <td>Column 3</td>
        </tr>
      </table>
      <table width="298" height="50" cellspacing="0" cellpadding="0" border="0" align="left" class="floattables">
        <tr>
          <td>Column 4</td>
        </tr>
      </table>
      <table width="298" height="50" cellspacing="0" cellpadding="0" border="0" align="left" class="floattables">
        <tr>
          <td>Column 5</td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

Thanks, Lando! Let us know if you have any questions about the above.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098