Creating Adaptive Table Based Floating Column Email without Media Query

StackOverflow https://stackoverflow.com/questions/21485108

  •  05-10-2022
  •  | 
  •  

문제

Unfortunately the program I use to send out email does not allow for @media queries nor .css lists at the top of said code. This is problematic seeing as I am building an email template based around floating columns. I would like for the two columns to be next to one another while viewing on a tablet or desktop, but have the list drop underneath the content panel while viewing on a mobile device.

Here is the base of what I have:

<div style="width: 100%; max-width: 650px; margin-left: auto; margin-right: auto;">
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="1" style="width: 100%;">
--banner image here--
</td>
</tr>
</tbody>
</table>
<table style="width: 100%;">
<tbody>
<tr>
<td align="left" valign="top" width="320px;" style="padding-left: 10px; padding-right: 10px;">
--content goes here--
</td>
<td align="left" valign="top" width="180px;" style="padding-left: 10px; padding-right: 10px;">
--list of links--
</td>
</tr>
</tbody>
</table>
</div>
도움이 되었습니까?

해결책

It's doable. Without media queries you will be limited to how involved you get. This would work well if your columns were of equal width. I'm not sure how your design is, but without a media query it will be challenging to make even columns. Here is some roughed out HTML to get you going. 

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Untitled Document</title>
    </head>

    <body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0">

    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td width="100%" align="center" valign="top">       

                <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 650px;">
                    <tr>
                        <td width="650">

                            <table cellpadding="0" cellspacing="0">

                                    <tr>
                                        <td colspan="1" style="width: 100%;"> --banner image here-- </td>
                                    </tr>

                            </table>
                            <table align="left" width="320">

                                    <tr>
                                        <td align="left" valign="top" width="320" bgcolor="#00CC99" style="padding-left: 10px; padding-right: 10px;"> --content goes here-- </td>
                                    </tr>

                            </table>
                            <table align="left" width="180">

                                    <tr>
                                        <td align="left" valign="top" width="180" bgcolor="#99CC33" style="padding-left: 10px; padding-right: 10px;"> --list of links-- </td>
                                    </tr>

                            </table>

                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

</body>

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top