如何隐藏电子邮件通讯的表格？答案

【问题标题】：How to hide a table for email newsletter?如何隐藏电子邮件通讯的表格？
【发布时间】：2015-07-08 17:16:00
【问题描述】：

我正在为我的一个客户编写电子邮件通讯，并在表格（而不是 DIV）中设计了整个电子邮件通讯，但很难在响应式视图中隐藏一个表格，在桌面视图中隐藏另一个表格

我试过display:none important!，但没用

您可以查看我的时事通讯here。

我想在移动视图中隐藏右栏here。

如果其他人遇到类似问题，请告诉我，他们是如何解决的。

【问题讨论】：

广告确实会根据您的媒体查询消失，但订阅按钮仍然存在，这可能是最好的，因为您希望他们订阅无论他们是否是移动设备
我无法复制问题
我相信指令是!important，与important!不同。
您可以使用 display: none，但请注意电子邮件客户端不完全支持媒体查询。请参阅此链接以获得支持：campaignmonitor.com/css

标签： email html-email email-client

【解决方案1】：

您似乎将display: none; 放在您的一个媒体查询中，但不是全部。我试着把它放在“通用类”中（正如你在代码中所说的那样），它就像一个魅力（见here）。

所以一个有效的代码是：

<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE"/>

<title>Oncology</title>

<style type="text/css">
html, body {
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#000000;
    background:url(../images/bg01.jpg) left top repeat;
    }

/* Global Classes starts */
* {
outline:none;
}

div, form, P
{
 margin:0px;
 padding:0px;
}

A IMG /* This Class will disble border over any link on images*/
{ 
  border:none;
  outline:none
}
a
{
    text-decoration:underline;
    color:#004274;
}

a:hover
{
    text-decoration:none;
    color:#cb0202;
}
p
{
    color:#000000;
    padding:5px 0px 5px 0px;
    margin:5px 0px 5px 0px;
}

p a
{
    text-decoration:underline;
    color:#004274;
}

p a:hover
{
    text-decoration:none;
    color:#cb0202;
}

UL
    {
    /* Controls NORMAL UL */
    margin:0 0 0 15px; 
    padding:0 0 0 0;
    list-style-type:none; 
    color:#000000;
    }

UL LI
    {
    /* Controls NORMAL li inside UL */
    margin:0 0 3px 0; 
    padding:0 0 0 12px;
    }

UL strong   {
font-size:15px;
    }   

OL 
    {
    /* Controls NORMAL OL */
    margin:0 0 0 28px; 
    padding:0 0 0 0;
    list-style-type:decimal; 
    }

OL LI
    {
    /* Controls NORMAL li inside OL */
    text-decoration:underline;
    color:#000000;
    }

OL LI A, LI A , OL A
    {
    /* Controls LINKS inside OL */
    text-decoration:underline;
    color:#004274;
    }

OL A:HOVER
    {
    /* Controls LINKS HOVER inside OL */
    text-decoration:none;
    color:#cb0202;
    }

UL A
    {
    /* Controls LINKS inside UL */
    text-decoration:underline;
    color:#004274;
    }

UL A:HOVER
    {
    /* Controls LINKS HOVER inside UL */
    text-decoration:none;
    color:#cb0202;
    }
/* ----Global Classes ends-----*/   

.clr {  margin:0; padding:0; clear:both;}
.main_wrapper{ margin:0px auto; padding:0px; max-width:768px; background:url(http://www.webdesignagencynewyork.com/dev/oncology/images/header-bg.png)left top repeat-x, url(http://www.webdesignagencynewyork.com/dev/oncology/images/footer-bg.png)left bottom repeat-x;}
.main_container{ margin:0px auto; padding:35px 0px 20px; width:78%;}
.header_container{ margin:0px auto 20px; padding:0px 10px;}
.header_logo{ margin:0px; padding:0px; width:55%; float:left; text-align:center;}
.header_logo img{ margin:0px; padding:0px; width:auto; height:auto; max-width:100%;}
.header_social{ margin:0px; padding:0px; width:30%; float:right; text-align:right;}
.header_social_date{ margin:0px; padding:0px;}
.header_social_date h6{ margin:0px 0px 30px 0px; padding:0px; color:#272626; font-size:13px; font-weight:400;  display:block;}
.header_social_image{ margin:0px; padding:0px;}
.header_social_image img{ margin:0px; padding:0px; width:auto; height:auto; max-width:100%;}

.header_info{ margin:0px 0px 20px 0px; padding:0px; text-align:center;}
.header_info ul{ margin:0px; padding:0px; list-style-type:none; text-align:center;}
.header_info ul li{ margin:0px; padding:0px 12px 0px 6px; display:inline-block; background:url(http://www.webdesignagencynewyork.com/dev/oncology/images/li-div.png) right top no-repeat;}
.header_info ul li a{ margin:0px; padding:0px; color:#7e3553; font-size:15px; font-weight:normal; text-decoration:none; display:block;}
.header_info ul li:last-child{ background:none;}
.header_info ul li a:hover{ color:#017c9c;}

.banner{ margin:0px auto; padding:0px;}
.banner img{ margin:0px; padding:0px; width:100%;}
.caption_wrapper{ margin:0px; padding:0px; width:100%; position:relative; z-index:100;}
.caption_container{ margin:-88px auto 40px ; padding:0px; width:62%;}
.caption_container h1{margin:0px 0px 8px 0px; padding:0px; color:#fff; font-size:30px; font-weight:400; line-height:30px;  display:block;}
.caption_container h2{margin:0px; padding:0px; color:#fff; font-size:24px; font-weight:400; line-height:30px; display:block;}
.body_container{ margin:0px auto; padding:0px 10px;}
.body_left{ margin:0px; padding:0px; width:64%; float:left;}
.body_left_box{ margin:0px 0px 15px 0px; padding:0px; }
.news_read{ margin:0px 0px 5px 0px; padding:0px; border-bottom:1px solid #d2d3d2;}
.news_read strong{ margin:0px; padding:2px 6px; color:#fff; font-size:13px; font-weight:400; text-decoration:none;  display:inline-block; background:#017c9c;}
.news_box{ margin:0px 0px 5px 0px; padding:0px; border-bottom:2px dotted #cccccc;}
.news_box h6{ margin:0px; padding:0px; color:#272626; font-size:13px; font-weight:400; line-height:16px;  display:block;}
.news_box h6 a{ margin:0px 0px 8px 0px; padding:0px; color:#272626; font-size:13px; font-weight:400; line-height:16px;  display:block; text-decoration:none;}
.news_box h6 a:hover{ color:#017c9c;}
.news_box label{ margin:0px; padding:0px; color:#616364; font-size:10px; font-weight:400; display:block;}
.news_box label span{ margin:0px; padding:0px; color:#7e3553; font-size:10px; font-weight:400; font-style:italic;}
.news_box p{ margin:0px; padding:0px 0px 5px 0px; color:#808080; font-size:11px; font-weight:400; line-height:14px;}
.news_box p a{ margin:0px; padding:0px; color:#0082a2; font-size:10px; font-weight:400; text-decoration:none;}
.news_box p a:hover{ color:#272626;}
.social_link{ margin:0px; padding:0px;}
.social_link img{ margin:0px 0px 6px 0px; padding:0px; width:auto; height:auto; max-width:100%;}

.body_right{ margin:0px; padding:0px; width:33%;display:none; float:right;}

.subscribe{ margin:0px 0px 40px 0px; padding:0px; text-align:center;}
.subscribe a{ margin:0px; padding:6px 15px; color:#fff; font-size:12px; font-weight:400; display:inline-block; text-decoration:none; border-radius:5px;
border-bottom:1px solid #000;
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #017c9c), color-stop(1, #4eaac2));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #017c9c 0%, #4eaac2 100%);
}
.subscribe a:hover{ color:#272626;}
.sidebox1{ margin:0px 0px 35px; padding:0px;}
.sidebox1 img{ margin:0px; padding:0px; width:auto; height:auto; max-width:100%;}
.sidebox2{ margin:0px; padding:0px;}
.sidebox2 img{ margin:0px; padding:0px; width:auto; height:auto; max-width:100%;}

.footer{ margin:0px auto; padding:0px;  text-align:center;}
.footer p{ margin:0px; padding:0px 0px 10px 0px; color:#363333; font-size:11px; font-weight:400; line-height:18px;}

.site_link{ margin:0px 0px 8px 0px; padding:0px; text-align:center;}
.site_link a{ margin:0px; padding:10px 35px; color:#fff; font-size:15px; font-weight:400; display:inline-block; text-decoration:none; border-radius:3px;
border-bottom:1px solid #000; 
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #017c9c), color-stop(1, #4eaac2));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #017c9c 0%, #4eaac2 100%);
}
.site_link a:hover{ color:#272626;}
.footer span{ margin:0px 0px 5px 0px; padding:0px; color:#2eb5d9; font-size:11px; display:block;}
.footer span a{ margin:0px; padding:0px; color:#2eb5d9; font-size:11px; display:inline-block; text-decoration:none;}
.footer label{ margin:0px 0px 10px 0px; padding:0px; color:#999999; font-size:11px; display:block;}
.footer label a{ margin:0px; padding:0px; color:#999999; font-size:11px;  display:inline-block;}

.footer_logo{ margin:0px 0px 10px 0px; padding:0px;}
.footer_logo img{ margin:0px; padding:0px; width:auto; height:auto; max-width:100%;}

.copywrite{ margin:0px; padding:0px;}
.copywrite span{ margin:0px 0px 5px 0px; padding:0px; color:#017c9c; font-size:11px;  display:block;}
.copywrite label{ margin:0px 0px 5px 0px; padding:0px; color:#363333; font-size:11px;  display:block;}

.left_sidebox1{ margin:0px 0px 0px; padding:0px; text-align:center; display:none;}
.left_sidebox1 img{ margin:0px; padding:0px; width:auto; height:auto; max-width:100%;}
.left_sidebox2{ margin:0px; padding:0px; text-align:center; display:none;}
.left_sidebox2 img{ margin:0px; padding:0px; width:auto; height:auto; max-width:100%;}

.body_left .subscribe{ display:none;}
.footer label br{ display:none;}



/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {  
.main_wrapper{ width:100%;}
.main_container{ padding:20px 0px 10px; width:94%;}
.header_social h6{ margin:0px 0px 20px 0px;}
.caption_container { margin: -68px auto 30px;}
.caption_container h1{ font-size:24px; line-height:24px;}
.caption_container h2{ font-size:18px; line-height:18px;}
.subscribe a{ font-size:10px;}
.footer p br{ display:none;}

}

@media only screen and (max-width: 479px) { 

.main_wrapper{ width:100%;}
.main_container{ padding:20px 0px 10px; width:100%;}
.header_container { margin: 0 auto 15px;}
.header_logo{ margin:0px 0px 20px 0px; width:100%; float:none;}
.header_social{ width:100%; float:none; text-align:justify;}
.header_social h6{ margin:0px; display:inline-block;}

.header_social_date{ margin:5px 0px 0px 0px; width:45%; float:left;}
.header_social_image{ width:45%; float:right; text-align:right;}
.header_info ul li{padding: 0 8px 0 4px;}
.header_info ul li a{ font-size:11px;}
.header_info {  margin: 0 0 12px;}
.caption_container {  margin: -50px auto 20px;}
.caption_container h1{margin: 0 0 5px; font-size:18px; line-height:18px;}
.caption_container h2{ font-size:13px; line-height:13px;}

.body_right{ display:none;}
.body_left{ float:none; width:100%;}
.left_sidebox1{ margin: 12px 0 6px; display:block;}
.left_sidebox2{ margin:0px 0px 6px 0px; display:block;}

.body_left .subscribe{ margin: 0 0 10px; display:block;}
.body_left .subscribe a{ padding:7px 25px; border-bottom:0px;}
.footer label br{ display:block;}
}

</style>
</head>

<body>
<div class="main_wrapper">
<div class="main_container">
<div class="header_container">
<div class="header_logo"><a href="#"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/logo.png" ></a></div>
<div class="header_social">
<div class="header_social_date">
<h6>May 18, 2015</h6>
</div>
<div class="header_social_image">
<a href="https://www.facebook.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb-icon.png"></a>
<a href="https://www.twitter.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw-icon.png"></a>
<a href="https://www.linkedin.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in-icon.png"></a>
</div>
</div>
<div class="clr"></div>
</div>
<div class="header_info">
<ul>
<li><a href="#">Online First</a></li>
<li><a href="#">FDA Updates</a></li>
<li><a href="#">Clinical Resource Center</a></li>
</ul>
</div>
<div class="banner">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/header_banner.png">
<div class="caption_wrapper">
<div class="caption_container">
<h1>Simple. Fast. Precise</h1>
<h2>Empowering Regional Anesthesio</h2>
</div>
</div>
</div>
<div class="body_container">
<div class="body_left">
<div class="body_left_box">
<div class="subscribe"><a href="#">Subscribe to this enews</a></div>
<div class="news_read">
<strong>Top News</strong>
</div>
<div class="news_box">
<h6><a href="#">Two FDA Advisory Committees Recommend Approval of Talimogene for Metastatic Melanoma</a></h6>
<label>by <span>Peggy Eastman</span></label>
<p>In a joint meeting, two advisory committees to the Food and Drug Administration recommended approval of the biologic agent talimogene laherparepvec (T-VEC) for injectable regionally or distantly metastatic melanoma. <a href="#">Read More.</a></p>
<div class="social_link">
<a href="https://www.facebook.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb.png"></a>
<a href="https://www.twitter.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw.png"></a>
<a href="https://www.linkedin.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in.png"></a>
</div>
</div>
<div class="news_box">
<h6><a href="#">Two New Drugs Promising in Attack of Attractive Targets in CTCL </a></h6>
<label>by <span>Mark Fuerst</span></label>
<p>Drugs now in development show promise in attacking two attractive targets of cutaneous T-cell lymphoma (CTCL). <a href="#">Read More.</a></p>
<div class="social_link">
<a href="https://www.facebook.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb.png"></a>
<a href="https://www.twitter.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw.png"></a>
<a href="https://www.linkedin.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in.png"></a>
</div>
</div>
<div class="news_box">
<div class="left_sidebox1">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/images/sidebar-img1.jpg">
</div>
<h6><a href="#">SCLC: Evidence that Maintenance Sunitinib Can Extend Progression-Free Survival in Patients with Extensive Disease </a></h6>
<label>by <span>Kurt Samson</span></label>
<p>The tyrosine kinase inhibitor sunitinib appears to offer a small improvement in progression-free survival in patients receiving chemotherapy for extensive-stage small-cell lung cancer (ES-SCLC). <a href="#">Read More.</a></p>
<div class="social_link">
<a href="https://www.facebook.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb.png"></a>
<a href="https://www.twitter.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/w.png"></a>
<a href="https://www.linkedin.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in.png"></a>
</div>
</div>
</div>
<div class="body_left_box">
<div class="left_sidebox2">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/sidebar-img2.jpg">
</div>
<div class="news_read">
<strong>Must Read</strong>
</div>
<div class="news_box">
<h6><a href="#"> Experts Say Here's How to Improve Mammography Interpretation...</a></h6>
<label>by <span>Peggy Eastman</span></label>
<p>Speakers agreed that while the technical quality of mammography has improved since the national Mammography Quality Standards Act (MQSA) of 1992, the interpretation of mammograms remains variable, which limits the detection of early breast cancer. <a href="#">Read More.</a></p>
<div class="social_link">
<a href="https://www.facebook.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb.png"></a>
<a href="https://www.twitter.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw.png"></a>
<a href="https://www.linkedin.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in.png"></a>
</div>
</div>
<div class="news_box">
<h6><a href="#">Genome Editing-and Future of the human Species</a></h6>
<label>by <span>George W. Sledge, Jr., MD</span></label>
<p>If you want to see what athe future holds for us, tel me suggest two recent articles... <a href="#">Read More.</a></p>
<div class="social_link">
<a href="https://www.facebook.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb.png"></a>
<a href="https://www.twitter.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw.png"></a>
<a href="https://www.linkedin.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in.png"></a>
</div>
</div>
<div class="news_box">
<h6><a href="#">What ASCO's Payment Reform Idea Means to YOU</a></h6>
<label>by <span>Lola Butcher</span></label>
<p>2015 is trying to go down in history as the year of payment reform for cancer care, and ASCOisn't going to miss out of the fun... <a href="#">Read More.</a></p>
<div class="social_link">
<a href="https://www.facebook.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb.png"></a>
<a href="https://www.twitter.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw.png"></a>
<a href="https://www.linkedin.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in.png"></a>
</div>
</div>
</div>

</div>
<div class="body_right">
<div class="subscribe"><a href="#">Subscribe to this enews</a></div>
<div class="sidebox1">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/sidebar-img1.jpg">
</div>
<div class="sidebox2">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/sidebar-img2.jpg" >
</div>
</div>
<div class="clr"></div>
</div>
<div class="footer">
<p>Keep receiving Oncology Times eNews by adding editor@oncology-times.info to your address book.<br>
Oncology Times respects your privacy and will not share your information with other companies or organizations without your permission. View our Privacy Policy.</p>
<div class="site_link"><a href="www.oncology-times.com" target="_blank">www.oncology-times.com</a></div>
<span><a href="mailto:ot@lwwny.com">ot@lwwny.com</a></span>
<label>If you do not wish to recieve<br> the Oncology Times enews please <a href="#">unsubscribe</a>.</label>
<div class="footer_logo"><a href="#"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/footer-logo.png" ></a></div>
<div class="copywrite">
<span>333 Seventh Ave., 19th Fl., New York, NY 10001</span>
<label>Copyright ©2015 All Rights Reserved.</label>
</div>
</div>

</div>
</div>
</body>
</html>

【讨论】：

【解决方案2】：

您的代码中存在一些验证问题（缺少和额外的 tr 和 td 标记等），CSS 肯定需要通过内联程序运行（例如 Mailchimps - 但请确保您的媒体查询通过并且在内衬中未删除。）在使用之前，但下面应该解决您的问题：

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE"/>
<title>Oncology</title>


<style type="text/css">

#outlook a { 
  padding:0; 
} 

html,body{font-family:Arial, Helvetica, sans-serif; font-weight:normal; text-transform:none; margin:0px; padding:0px;}

.clr {  margin:0; padding:0; clear:both;}

.container{ margin:0px auto; width:600px; padding:0px 0px;} 

.header{ 
margin:0px 0px; padding:15px 50px 0px; width:500; display:block;
/* Safari 4-5, Chrome 1-9 */ 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#dcf6fc), to(#fff)); 
/* Safari 5.1, Chrome 10+ */ 
background: -webkit-linear-gradient(top, #dcf6fc, #fff); 
/* Firefox 3.6+ */ 
background: -moz-linear-gradient(top, #dcf6fc, #fff); 
/* IE 10 */ 
background: -ms-linear-gradient(top, #dcf6fc, #fff); 
/* Opera 11.10+ */ 
background: -o-linear-gradient(top, #dcf6fc, #fff);
} 
.logo{ margin:0px; padding:10px 0px 0px 0px; width:502px; }
.logo img{ margin:0px; padding:0px; width:auto; height:auto; display: block;}

.icons{ margin:0px; padding:0px; width:96px; text-align:center }
.icons h6{ margin:0px 0px 0px 0px; padding:10px 0px 30px 0px ; color:#272626; font-size:13px; font-weight:400;  display:block;}

.info{ margin:0px 0px 0px 0px; padding:25px 0px; text-align:center;}
.info img{ margin:0px; padding: 0 12px; width:auto; height:auto; max-width:100%; vertical-align:middle;}
.info a{ margin:0px; padding:0px; color:#7e3553; font-size:15px; font-weight:normal; text-decoration:none; display:inline-block;}

.banner{ margin:0px; padding:0px 50px;}
.banner img{ margin:0px 0px 0px; padding:0px;  display: block; width: 100%;}
.body_left{ margin:0px; padding:0px 15px 0px 55px; width:64%;}
.body_right{ margin:0px; padding:0px 50px 0px 0px; width:33%; }
.subscribe{ margin:0px 0px 40px 0px; padding:0px; text-align:center; display:block;}
.subscribe a{ margin:0px; padding:6px 15px; color:#fff; font-size:12px; font-weight:400; display:inline-block; text-decoration:none; border-radius:5px; text-align:center;
border-bottom:1px solid #000;
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #017c9c), color-stop(1, #4eaac2));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #017c9c 0%, #4eaac2 100%);
}

.sidebox1{ margin:0px 0px 35px; padding:0px; display:block; text-align:center;}
.sidebox1 img{ margin:0px; padding:0px; width:auto; height:auto; max-width:100%;}
.sidebox2{ margin:0px; padding:0px; display:block; text-align:center;}
.sidebox2 img{ margin:0px; padding:0px; width:auto; height:auto; max-width:100%;}

.news_read{ margin:0px 0px 5px 0px; padding:0px; border-bottom:1px solid #d2d3d2; display:block;}
.news_read strong{ margin:0px; padding:2px 6px; color:#fff; font-size:13px; font-weight:400; text-decoration:none;  display:inline-block; background:#017c9c;}
.news_box{ margin:0px 0px 5px 0px; padding:0px; border-bottom:2px dotted #cccccc;}
.news_box h6{ margin:0px; padding:0px; color:#272626; font-size:13px; font-weight:400; line-height:16px;  display:block;}
.news_box h6 a{ margin:0px 0px 8px 0px; padding:0px; color:#272626; font-size:13px; font-weight:400; line-height:16px;  display:block; text-decoration:none;}
.news_box h6 a:hover{ color:#017c9c;}
.news_box label{ margin:0px; padding:0px; color:#616364; font-size:10px; font-weight:400; display:block;}
.news_box label span{ margin:0px; padding:0px; color:#7e3553; font-size:10px; font-weight:400; font-style:italic;}
.news_box p{ margin:0px; padding:0px 0px 5px 0px; color:#808080; font-size:11px; font-weight:400; line-height:14px;}
.news_box p a{ margin:0px; padding:0px; color:#0082a2; font-size:10px; font-weight:400; text-decoration:none;}
.news_box p a:hover{ color:#272626;}
.social_link{ margin:0px; padding:0px;}
.social_link img{ margin:0px 0px 6px 0px; padding:0px; width:auto; height:auto; max-width:100%;}

.footer{ margin:0px auto; padding:0px 50px;  text-align:center; width:100%; display:block;}
.footer p{ margin:0px; padding:0px 0px 10px 0px; color:#363333; font-size:11px; font-weight:400; line-height:18px;}

.site_link{ margin:0px 0px 8px 0px; padding:0px; text-align:center;}
.site_link a{ margin:0px 0px 5px 0px; padding:10px 35px; color:#fff; font-size:15px; font-weight:400; display:inline-block; text-decoration:none; border-radius:3px;
border-bottom:1px solid #000; 
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #017c9c), color-stop(1, #4eaac2));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #017c9c 0%, #4eaac2 100%);
}
.footer span{ margin:0px 0px 5px 0px; padding:0px; color:#2eb5d9; font-size:11px; display:block;}
.footer span a{ margin:0px; padding:0px; color:#2eb5d9; font-size:11px; display:inline-block; text-decoration:none;}
.footer label{ margin:0px 0px 0px 0px; padding:0px; color:#999999; font-size:11px; display:block;}
.footer label a{ margin:0px; padding:0px; color:#999999; font-size:11px;  display:inline-block;}
.footer label br{ display:none;}

.footerbottom{margin:0px auto; padding:8px 50px 30px;  text-align:center;width:100%; 
/* Safari 4-5, Chrome 1-9 */ 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f2fcfe), to(#c9f1fb)); 
/* Safari 5.1, Chrome 10+ */ 
background: -webkit-linear-gradient(top, #f2fcfe, #c9f1fb); 
/* Firefox 3.6+ */ 
background: -moz-linear-gradient(top, #f2fcfe, #c9f1fb); 
/* IE 10 */ 
background: -ms-linear-gradient(top, #f2fcfe, #c9f1fb); 
/* Opera 11.10+ */ 
background: -o-linear-gradient(top, #f2fcfe, #c9f1fb);
} 

.footer_logo{ margin:0px 0px 10px 0px; padding:0px; text-align:center; }
.footer_logo img{ margin:0px 0px 10px 0px; padding:0px; width:auto; height:auto; max-width:100%;}

.copywrite{ margin:0px; padding:0px;  text-align:center;}
.copywrite span{ margin:0px 0px 5px 0px; padding:0px; color:#017c9c; font-size:11px;  display:block;}
.copywrite label{ margin:0px 0px 5px 0px; padding:0px; color:#363333; font-size:11px;  display:block;}



/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 600px) {  
.container{ margin:0px auto; width:80%; padding:0px; display:block; } 
.header{ padding:15px 0px 0px 0px;}

.info{padding:6px 0px;}

.logo {display:block; width:100%; text-align:center;}
.logo img{ width:80%;}

.banner{ padding:0px;}
.banner img{ width:100%}
.body_left{ padding: 0 15px 0 0;}
.body_right { padding: 0;}

.footer{ padding:0px;}
.footer p br{ display:none !important; display:none; width:0; height:0; line-height:0; overflow:hidden; visibility:hidden; mso-hide:all;}
.footerbottom{padding: 8px 0 10px;}

}
@media only screen and (max-width: 480px) { 
.container{ margin:0px auto; width:80%; padding:0px; display:block; } 
.header{ padding:5px 0px 0px 0px;}

.info{padding:0px;}
.info img{padding:0px 5px;}
.info a{ font-size:12px;}
.logo {display:block; width:100%; text-align:center;}
.logo img{ width:100%;}
.icons{ margin:0px auto; width:96px; display:block;}
.icons h6{ padding:10px 0px 15px 0px;}
.banner{ padding:0px;}
.banner img{ width:100%}
.body_left{padding:0px; width:100%; display:block;}
.body_right{  padding: 0; width:100%; display:block;}
.subscribe{ margin:0px; padding:10px 0px;}
.sidebox1{ margin:0px; padding:0px 0px 10px; display:none !important; width:0 !important; height:0 !important; line-height:0 !important; overflow:hidden !important; visibility:hidden !important;}
.sidebox2{ margin:0px; padding:0px 0px 5px 0px; display:none !important; width:0 !important; height:0 !important; line-height:0 !important; overflow:hidden !important; visibility:hidden !important;}

.footer{ padding:0px;}
.footerbottom{padding: 8px 0 10px;}
}
</style>

</head>

<body style="margin:0px; padding:0px;">


<table align="center" class="container">
  <tr>
    <td valign="top" class="header">

    <table border="0" cellspacing="0" cellpadding="0" >
  <tr>
    <td class="logo"><a href="#"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/logo.png" ></a></td>
    <td class="icons" valign="top">
    <h6>May 18, 2015</h6>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="social">
  <tr>
    <td><a href="https://www.facebook.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb-icon.png"></a></td>
    <td><a href="https://www.twitter.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw-icon.png"></a></td>
    <td><a href="https://www.linkedin.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in-icon.png"></a></td>
  </tr>
</table>
    </td>
  </tr>
</table>
</td>
  </tr>
  <tr>
    <td valign="top" class="info">
<a href="#">Online First</a><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/li-div.png"><a href="#">FDA Updates</a><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/li-div.png"><a href="#">Clinical Resource Center</a>
</td>
  </tr>
  <tr>
    <td valign="top" class="banner"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/banner.png"></td>
  </tr>
  <tr>
    <td valign="top" style="padding-top:20px;">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" >
  <tr>
    <td class="body_left" valign="top">

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="news_box" >
     <tr>
    <td class="news_read"><strong>Top News</strong></td>
  </tr>
  <tr>
    <td >
    <h6><a href="#">Two FDA Advisory Committees Recommend Approval of Talimogene for Metastatic Melanoma</a></h6>
    </td>
  </tr>
  <tr>
    <td ><label>by <span>Peggy Eastman</span></label></td>
  </tr>
  <tr>
    <td>
    <p>In a joint meeting, two advisory committees to the Food and Drug Administration recommended approval of the biologic agent talimogene laherparepvec (T-VEC) for injectable regionally or distantly metastatic melanoma. <a href="#">Read More.</a></p>
    </td>
  </tr>
  <tr>
    <td class="social_link">
    <a href="https://www.facebook.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb.png"></a>
<a href="https://www.twitter.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw.png"></a>
<a href="https://www.linkedin.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in.png"></a>
    </td>
  </tr>
</table>

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="news_box" >
      <tr>
    <td >
    <h6><a href="#">Two New Drugs Promising in Attack of Attractive Targets in CTCL </a></h6>
    </td>
  </tr>
  <tr>
    <td ><label>by <span>Mark Fuerst</span></label></td>
  </tr>
  <tr>
    <td>
    <p>Drugs now in development show promise in attacking two attractive targets of cutaneous T-cell lymphoma (CTCL). <a href="#">Read More.</a></p>
    </td>
  </tr>
  <tr>
    <td class="social_link">
    <a href="https://www.facebook.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb.png"></a>
<a href="https://www.twitter.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw.png"></a>
<a href="https://www.linkedin.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in.png"></a>
    </td>
  </tr>
</table>

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="news_box" >
     <tr>
    <td >
    <h6><a href="#">SCLC: Evidence that Maintenance Sunitinib Can Extend Progression-Free Survival in Patients with Extensive Disease</a></h6>
    </td>
  </tr>
  <tr>
    <td ><label>by <span>Kurt Samson</span></label></td>
  </tr>
  <tr>
    <td>
    <p>The tyrosine kinase inhibitor sunitinib appears to offer a small improvement in progression-free survival in patients receiving chemotherapy for extensive-stage small-cell lung cancer (ES-SCLC). <a href="#">Read More.</a></p>
    </td>
  </tr>
  <tr>
    <td class="social_link">
    <a href="https://www.facebook.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb.png"></a>
<a href="https://www.twitter.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw.png"></a>
<a href="https://www.linkedin.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in.png"></a>
    </td>
  </tr>
</table>

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="news_box" >
   <tr>
    <td class="news_read"><strong>Must Read</strong></td>
  </tr>
  <tr>
    <td >
    <h6><a href="#">Experts Say Here's How to Improve Mammography Interpretation...</a></h6>
    </td>
  </tr>
  <tr>
    <td ><label>by <span>Peggy Eastman</span></label></td>
  </tr>
  <tr>
    <td>
    <p>Speakers agreed that while the technical quality of mammography has improved since the national Mammography Quality Standards Act (MQSA) of 1992, the interpretation of mammograms remains variable, which limits the detection of early breast cancer.  <a href="#">Read More.</a></p>
    </td>
  </tr>
  <tr>
    <td class="social_link">
    <a href="https://www.facebook.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb.png"></a>
<a href="https://www.twitter.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw.png"></a>
<a href="https://www.linkedin.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in.png"></a>
    </td>
  </tr>
</table>

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="news_box" >
      <tr>
    <td >
    <h6><a href="#">Genome Editing-and Future of the human Species</a></h6>
    </td>
  </tr>
  <tr>
    <td ><label>by <span>George W. Sledge, Jr., MD</span></label></td>
  </tr>
  <tr>
    <td>
    <p>If you want to see what athe future holds for us, tel me suggest two recent articles...<a href="#">Read More.</a></p>
    </td>
  </tr>
  <tr>
    <td class="social_link">
    <a href="https://www.facebook.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb.png"></a>
<a href="https://www.twitter.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw.png"></a>
<a href="https://www.linkedin.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in.png"></a>
    </td>
  </tr>
</table>

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="news_box" >
     <tr>
    <td >
    <h6><a href="#">What ASCO's Payment Reform Idea Means to YOU</a></h6>
    </td>
  </tr>
  <tr>
    <td ><label>by <span>Lola Butcher</span></label></td>
  </tr>
  <tr>
    <td>
    <p>2015 is trying to go down in history as the year of payment reform for cancer care, and ASCOisn't going to miss out of the fun... <a href="#">Read More.</a></p>
    </td>
  </tr>
  <tr>
    <td class="social_link">
    <a href="https://www.facebook.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb.png"></a>
<a href="https://www.twitter.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw.png"></a>
<a href="https://www.linkedin.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in.png"></a>
    </td>
  </tr>
</table>

    </td>
    <td class="body_right" valign="top">

    <table width="100%">
    <tr>
    <td class="subscribe"><a href="#">Subscribe to this enews</a></td>
      </tr>
      <tr>
    <td class="sidebox1"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/sidebar-img1.jpg"></td>
      </tr>
      <tr>
    <td class="sidebox2"> <img src="http://www.webdesignagencynewyork.com/dev/oncology/images/sidebar-img2.jpg" ></td>
      </tr>
    </table>
    </td>
  </tr>
</table>

    </td>
 </tr>
 <tr>
 <td>
  <table border="0" cellspacing="0" cellpadding="0" class="footer">
  <tr >
    <td >
    <p>Keep receiving Oncology Times eNews by adding editor@oncology-times.info to your address book.<br>
Oncology Times respects your privacy and will not share your information with other companies or organizations without your permission. View our Privacy Policy.</p>
    </td>
  </tr>
  <tr>
    <td class="site_link"><a href="www.oncology-times.com" target="_blank">www.oncology-times.com</a></td>
  </tr>
  <tr>
    <td><span><a href="mailto:ot@lwwny.com">ot@lwwny.com</a></span></td>
  </tr>
  <tr>
    <td><label>If you do not wish to recieve<br> the Oncology Times enews please <a href="#">unsubscribe</a>.</label></td>
  </tr>
</table>

 </td>
  </tr>
  <tr>
 <td >
<table class="footerbottom"  border="0" cellspacing="0" cellpadding="0">
  <tr >
    <td class="footer_logo" width="100%" ><a href="#"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/footer-logo.png" ></a></td>
  </tr>
  <tr >
    <td class="copywrite" ><span>333 Seventh Ave., 19th Fl., New York, NY 10001</span>
    <label>Copyright ©2015 All Rights Reserved.</label></td>
  </tr>
</table>

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


</body>
</html>

【讨论】：