我试图用HTML制作电子邮件签名。但我想使其在诸如智能手机之类的小屏幕上响应。 我的问题是如何将桌子放在彼此下面。 Current signature- The signature I want on mobile devices
我使用表生成器从表中做出了签名，但此时此刻我被困住了。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Signature</title>
</head>
<body>
<table style="width: 1286px; height: 292px;" border="0">
<tbody>
<tr>
<td style="background-color: black;" "="" 235.867px;="" text-align:=""
center;="" background-color:="" white;"="">
<div style=" background-color: transparent; text-align: center;">
<h1><span style="font-size:40px;"><b><span style="font-family: Roboto;"><span
style="color: #d6d752;">Lorem </span><span style="color: white;">Ipsum<br>
</span></span></b></span></h1>
</div>
<div style="text-align: center;"><span style="color: white;"><span style="font-family: Roboto;">Function</span></span><br>
<span style="color: white;"><span style="font-family: Roboto;"> </span></span><br>
<span style="color: white;"><span style="font-family: Roboto;">
Company</span></span></div>
</td>
<td><img src="file://contact%20-%203.png"
alt="contact"><br>
</td>
<td style="text-align: left; width: 327.233px;">
<div style="display:inline-block;vertical-align:top;"> </div>
<div style="display:inline-block;">
<div><span style="font-family: Poppins;">Adress</span></div>
<span style="font-family: Poppins;"> </span>
<div><span style="font-family: Poppins;">Adress</span></div>
<span style="font-family: Poppins;"> </span>
<div><span style="font-family: Poppins;">Adress</span></div>
<span style="font-family: Poppins;"> </span>
<div><span style="font-family: Poppins;">Adress</span></div>
<div><span style="font-family: Poppins;">Adress</span></div>
<div><span style="font-family: Poppins;"><br>
</span></div>
<span style="font-family: Poppins;"> </span>
<div><span style="font-family: Poppins;">Phone</span></div>
<span style="font-family: Poppins;"> </span>
<div><span style="font-family: Poppins;">Phone</span></div>
<div><span style="font-family: Poppins;"><br>
</span></div>
<span style="font-family: Poppins;"> </span>
<div><span style="font-family: Poppins;">website</span></div>
<span style="font-family: Poppins;"> </span>
<div><span style="font-family: Poppins;">website</span></div>
</div>
</td>
<td style="background-color: #c6c6c6; text-align: center; width: 516.5px;"><img
src="file://20NW%20350-%201.jpg"
alt="logo"><br>
</td>
</tr>
</tbody>
</table>
<p><br>
</p>
</body>
</html>
答案 0 :(得分：0)
如何使用本实用指南：github - Email-Framework
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Signature</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style type="text/css">
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; outline: none; text-decoration: none; }
table { border-collapse: collapse !important; }
body { margin: 0 !important; padding: 0 !important; width: 100% !important; }
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
.box {
min-height: 200px;
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] { margin: 0 !important; }
/* MEDIA QUERIES */
@media all and (max-width:639px){
.wrapper{ width:320px!important; padding: 0 !important; }
.container{ width:300px!important; padding: 0 !important; }
.mobile{ width:300px!important; display:block!important; padding: 0 !important; }
.img{ width:100% !important; height:auto !important; }
*[class="mobileOff"] { width: 0px !important; display: none !important; }
*[class*="mobileOn"] { display: block !important; max-height:none !important; }
}
</style>
</head>
<body style="margin:0; padding:0; background-color:#F2F2F2;">
<span style="display: block; width: 640px !important; max-width: 640px; height: 1px" class="mobileOff"></span>
<center>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#F2F2F2">
<tr>
<td align="center" valign="top">
<table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
<tr>
<td height="10" style="font-size:10px; line-height:10px;"> </td>
</tr>
<tr>
<td align="center" valign="top">
<table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
<tr>
<td width="200" class="mobile box" align="center" valign="top" style="background-color: black; text-align:center; font-family: 'Roboto', sans-serif;">
<h1 style="font-size: 25px; color: #d6d752; padding-top: 50px">Lorem <span style="color: #ffffff;">Ipsum</span></h1>
<h2 style="color: #ffffff; font-size: 12px;">Function</h2>
<h2 style="color: #ffffff; font-size: 12px;">Company</h2>
</td>
<td width="200" class="mobile" align="center" valign="top">
<div style="display:inline-block;">
<div><span style="font-family: Poppins;">Adress</span></div>
<span style="font-family: Poppins;"> </span>
<div><span style="font-family: Poppins;">Adress</span></div>
<span style="font-family: Poppins;"> </span>
<div><span style="font-family: Poppins;">Adress</span></div>
<span style="font-family: Poppins;"> </span>
<div><span style="font-family: Poppins;">Adress</span></div>
<div><span style="font-family: Poppins;">Adress</span></div>
<div><span style="font-family: Poppins;"><br>
</span></div>
<span style="font-family: Poppins;"> </span>
<div><span style="font-family: Poppins;">Phone</span></div>
<span style="font-family: Poppins;"> </span>
<div><span style="font-family: Poppins;">Phone</span></div>
<div><span style="font-family: Poppins;"><br>
</span></div>
<span style="font-family: Poppins;"> </span>
<div><span style="font-family: Poppins;">website</span></div>
<span style="font-family: Poppins;"> </span>
<div><span style="font-family: Poppins;">website</span></div>
</div>
</td>
<td width="200" class="mobile box" align="center" valign="top" style="background-color: #c6c6c6; text-align: center;">
<img src="file://20NW%20350-%201.jpg" alt="logo">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10" style="font-size:10px; line-height:10px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>