Question

我正在尝试创建一个HTML模板，我将用它来发送电子邮件。在模板中，我有一个单行表，我想让它完全水平或完全垂直，如下所示，取决于屏幕宽度。

笔记本电脑或台式电脑中的

应该是这样的 in laptop or desktop

，在移动设备中，它应该如下所示

in mobile devices

 <style type="text/css">

body {margin: 0; padding: 0; min-width: 100%!important;}

.content {width: 100%; max-width: 600px;}  

.subhead {font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px;}

.h1 {font-size: 33px; line-height: 38px; font-weight: bold;}

.h1, .h2, .bodycopy {color: #153643; font-family: sans-serif;}

.button {text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;}
    .button a {color: #ffffff; text-decoration: none;}
    </style>


    <table>
        <tr>
      <td class="innerpadding borderbottom">
        <table width="40" align="left" border="0" cellpadding="0" cellspacing="0">  
          <tr>
            <td height="40" style="padding: 0 20px 20px 0;">
              <img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
            </td>
          </tr>
        </table>
         <table width="40" align="left" border="0" cellpadding="0" cellspacing="0">  
          <tr>
            <td height="40" style="padding: 0 20px 20px 0;">
              <img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
            </td>
          </tr>
        </table>
         <table width="40" align="left" border="0" cellpadding="0" cellspacing="0">  
          <tr>
            <td height="40" style="padding: 0 20px 20px 0;">
              <img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
            </td>
          </tr>
        </table>
         <table width="40" align="left" border="0" cellpadding="0" cellspacing="0">  
          <tr>
            <td height="40" style="padding: 0 20px 20px 0;">
              <img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
            </td>
          </tr>
        </table>
         <table width="40" align="left" border="0" cellpadding="0" cellspacing="0">  
          <tr>
            <td height="40" style="padding: 0 20px 20px 0;">
              <img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
            </td>
          </tr>
        </table>
         <table width="40" align="left" border="0" cellpadding="0" cellspacing="0">  
          <tr>
            <td height="40" style="padding: 0 20px 20px 0;">
              <img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
            </td>
          </tr>
        </table>
         <table width="40" align="left" border="0" cellpadding="0" cellspacing="0">  
          <tr>
            <td height="40" style="padding: 0 20px 20px 0;">
              <img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
            </td>
          </tr>
        </table>
         <table width="40" align="left" border="0" cellpadding="0" cellspacing="0">  
          <tr>
            <td height="40" style="padding: 0 20px 20px 0;">
              <img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
            </td>
          </tr>
        </table>
         <table width="40" align="left" border="0" cellpadding="0" cellspacing="0">  
          <tr>
            <td height="40" style="padding: 0 20px 20px 0;">
              <img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
            </td>
          </tr>
        </table>
         <table width="40" align="left" border="0" cellpadding="0" cellspacing="0">  
          <tr>
            <td height="40" style="padding: 0 20px 20px 0;">
              <img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
            </td>
          </tr>
        </table>
         <table width="40" align="left" border="0" cellpadding="0" cellspacing="0">  
          <tr>
            <td height="40" style="padding: 0 20px 20px 0;">
              <img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
            </td>
          </tr>
    </table>
</td>
</tr>
</table>

Answer 1

你尝试过使用bootstrap吗？它会让你的生活变得更轻松。而且会涉及更少的代码。

Answer 2

示例：

＆＃13;

	table { width: 90%; }
	td { height: 40px; padding: 0px 20px 20px 0px; border: 1px solid #333; }  
	@media screen and (max-width: 640px) {
		td { display: block; width: 90%; }
	}

＆＃13;

<html>
</head>
<body>
	<table>
		<tbody>
          <tr>
            <td>
              <img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
            </td>
            <td>
              <img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
            </td>
            <td>
              <img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
            </td>
            <td>
              <img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
            </td>
            <td>
              <img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
            </td>
            <td>
              <img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
            </td>
            <td>
              <img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
            </td>
            <td>
              <img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
            </td>
            <td>
              <img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
            </td>
            <td>
              <img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
            </td>
            <td>
              <img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
            </td>
          </tr>
		</tbody>
    </table>
</body>
</html>

＆＃13;

电子邮件中的响应式HTML

2 个答案: