使 Tr 元素移动兼容

Question

我一直在努力开发一个电子邮件模板，因为我一直试图让它响应移动设备。但是，对于顶部的假日列表，我尝试在桌面浏览器中每行显示 3 个列表；对于移动浏览器，我希望每行只有一个列表，以使其看起来适合移动设备。

这里的问题是 <tr> 不支持我将 td 元素设为 100% 宽度，因为其他元素包含在 <tr> 容器中，我一直告诉电子邮件客户建议表格设计，所以我没有使用 div，因为不支持浮动等 P.S。抱歉代码混乱，显然内联样式最适合电子邮件。这是代码：http://codepen.io/anon/pen/vOPNXw

<div style="padding:20px; background-color:rgb(37,119,161);">
<tbody>
<tr>
    <td style="width:30%; margin-bottom:5px;">
        <img src="http://au.clubmatestravel.com/panel/upload/thumbnails/0CM15037-4.jpg_listing" style="width:100%; height:250px;">
        <h3 style="text-decoration:underline; padding: 5px; color:orange; font-weight:bold;">Eureka Spa</h3>
        <h3 style="padding: 5px; color:orange;">Departing on: 10-08-2015</h3>
        <div style="overflow:hidden; height:200px; padding:20px; background-color:white;"><p>Make our way into Daylesford for some great bargain hunting. &nbsp;No visit to Daylesford is complete without a visit to the Chocolate Mill for some home-made chocolates and a nice hot chocolate!</p></div>
        <a href="http://au.clubmatestravel.com/holiday/Eureka-Spa"><button style=" display: inline-block;margin-bottom: 0;font-weight: 400;text-align: center;vertical-align: middle;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;border-radius: 4px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;width:100%; float:left;height:50px; color: #fff; background-color: #47a447; border-color: #398439; ">View</button></a>
        <a href="http://au.clubmatestravel.com/contact?mode=enquiry&amp;tour=122"><button style="  display: inline-block;margin-bottom: 0;font-weight: 400;text-align: center;vertical-align: middle;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;border-radius: 4px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;width:100%; float:left;height:50px; color: #fff; background-color: #47a447; border-color: #398439; ">Enquire</button></a>
    </td>

    <td style="width:30%; margin-bottom:5px;">
        <img src="http://au.clubmatestravel.com/panel/upload/thumbnails/0CM15043-4.JPG_listing" style="width:100%; height:250px;">
        <h3 style="text-decoration:underline; padding: 5px; color:orange; font-weight:bold;">Mildura Music Festival </h3>
        <h3 style="padding: 5px; color:orange;">Departing on: 24-09-2015</h3>
        <div style="overflow:hidden; height:200px; padding:20px; background-color:white;"><p>Grab your hat and board the country music express. The country music kicks in as soon as you step onto the coach, and you will be <br>pumping out the vibes as you cruise the open highway up to the riverside town of Mildura. You will be bootscootin, shakin' your bootie, line dancing and any other way you like to do your thing!</p></div>
        <a href="http://au.clubmatestravel.com/holiday/Mildura-Music-Festival   "><button style=" display: inline-block;margin-bottom: 0;font-weight: 400;text-align: center;vertical-align: middle;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;border-radius: 4px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;width:100%; float:left;height:50px; color: #fff; background-color: #47a447; border-color: #398439; ">View</button></a>
        <a href="http://au.clubmatestravel.com/contact?mode=enquiry&amp;tour=123"><button style="  display: inline-block;margin-bottom: 0;font-weight: 400;text-align: center;vertical-align: middle;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;border-radius: 4px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;width:100%; float:left;height:50px; color: #fff; background-color: #47a447; border-color: #398439; ">Enquire</button></a>
    </td>

    <td style="width:30%; margin-bottom:5px;">
        <img src="http://au.clubmatestravel.com/panel/upload/thumbnails/0CM15049-1.JPG_listing" style="width:100%; height:250px;">
        <h3 style="text-decoration:underline; padding: 5px; color:orange; font-weight:bold;">Wangaratta Jazz &amp; Blues</h3>
        <h3 style="padding: 5px; color:orange;">Departing on: 29-10-2015</h3>
        <div style="overflow:hidden; height:200px; padding:20px; background-color:white;"><p>Travel to the Jazz Festival and embrace all the goodness that Wangaratta has to offer!</p></div>
        <a href="http://au.clubmatestravel.com/holiday/Wangaratta-Jazz-and-Blues"><button style=" display: inline-block;margin-bottom: 0;font-weight: 400;text-align: center;vertical-align: middle;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;border-radius: 4px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;width:100%; float:left;height:50px; color: #fff; background-color: #47a447; border-color: #398439; ">View</button></a>
        <a href="http://au.clubmatestravel.com/contact?mode=enquiry&amp;tour=124"><button style="  display: inline-block;margin-bottom: 0;font-weight: 400;text-align: center;vertical-align: middle;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;border-radius: 4px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;width:100%; float:left;height:50px; color: #fff; background-color: #47a447; border-color: #398439; ">Enquire</button></a>
    </td>
</tr><tr>
    <td style="width:30%; margin-bottom:5px;">
        <img src="http://au.clubmatestravel.com/panel/upload/thumbnails/0CM15048-2.jpg_listing" style="width:100%; height:250px;">
        <h3 style="text-decoration:underline; padding: 5px; color:orange; font-weight:bold;">WA Dolphin Delights</h3>
        <h3 style="padding: 5px; color:orange;">Departing on: 24-10-2015</h3>
        <div style="overflow:hidden; height:200px; padding:20px; background-color:white;"><p>Get to visit the amazing beaches and far less populated West. Prepare for a great time seeing the Dolphins. Be carried away by the <br>beautiful sights of Perth from Kings Park!</p></div>
        <a href="http://au.clubmatestravel.com/holiday/WA-Dolphin-Delights"><button style=" display: inline-block;margin-bottom: 0;font-weight: 400;text-align: center;vertical-align: middle;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;border-radius: 4px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;width:100%; float:left;height:50px; color: #fff; background-color: #47a447; border-color: #398439; ">View</button></a>
        <a href="http://au.clubmatestravel.com/contact?mode=enquiry&amp;tour=130"><button style="  display: inline-block;margin-bottom: 0;font-weight: 400;text-align: center;vertical-align: middle;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;border-radius: 4px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;width:100%; float:left;height:50px; color: #fff; background-color: #47a447; border-color: #398439; ">Enquire</button></a>
    </td>

    <td style="width:30%; margin-bottom:5px;">
        <img src="http://au.clubmatestravel.com/panel/upload/thumbnails/0CM15040-1.JPG_listing" style="width:100%; height:250px;">
        <h3 style="text-decoration:underline; padding: 5px; color:orange; font-weight:bold;">Camels, Pearls &amp; Whales</h3>
        <h3 style="padding: 5px; color:orange;">Departing on: 03-09-2015</h3>
        <div style="overflow:hidden; height:200px; padding:20px; background-color:white;"><p>Discover the Dinosaurs footprints at low tide, have an exciting&nbsp;camel ride along Cable Beach, and enjoy how&nbsp;rich the wildlife&nbsp;is at the spectacular Broome!&nbsp;</p></div>
        <a href="http://au.clubmatestravel.com/holiday/Camels-Pearls-and-Whales"><button style=" display: inline-block;margin-bottom: 0;font-weight: 400;text-align: center;vertical-align: middle;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;border-radius: 4px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;width:100%; float:left;height:50px; color: #fff; background-color: #47a447; border-color: #398439; ">View</button></a>
        <a href="http://au.clubmatestravel.com/contact?mode=enquiry&amp;tour=131"><button style="  display: inline-block;margin-bottom: 0;font-weight: 400;text-align: center;vertical-align: middle;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;border-radius: 4px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;width:100%; float:left;height:50px; color: #fff; background-color: #47a447; border-color: #398439; ">Enquire</button></a>
    </td>

    <td style="width:30%; margin-bottom:5px;">
        <img src="http://au.clubmatestravel.com/panel/upload/thumbnails/0CM15046-3.jpg_listing" style="width:100%; height:250px;">
        <h3 style="text-decoration:underline; padding: 5px; color:orange; font-weight:bold;">Sunset Markets</h3>
        <h3 style="padding: 5px; color:orange;">Departing on: 17-10-2015</h3>
        <div style="overflow:hidden; height:200px; padding:20px; background-color:white;"><p>Make your way to Berry Springs to the Territory Wildlife Park where you&nbsp;can view the wildlife up close, take a walk around the lagoon, go into the walk-through aquarium to view the amazing aquatic life and come nose to nose with a giant saltwater crocodile! This afternoon we are off to Berry Springs Nature Park for a refreshing swim. Don’t forget to wear your goggles so you can see many small native fish and other aquatic life that live in the clear pools. Wildlife is abundant!</p></div>
        <a href="http://au.clubmatestravel.com/holiday/Sunset-Markets"><button style=" display: inline-block;margin-bottom: 0;font-weight: 400;text-align: center;vertical-align: middle;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;border-radius: 4px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;width:100%; float:left;height:50px; color: #fff; background-color: #47a447; border-color: #398439; ">View</button></a>
        <a href="http://au.clubmatestravel.com/contact?mode=enquiry&amp;tour=135"><button style="  display: inline-block;margin-bottom: 0;font-weight: 400;text-align: center;vertical-align: middle;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;border-radius: 4px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;width:100%; float:left;height:50px; color: #fff; background-color: #47a447; border-color: #398439; ">Enquire</button></a>
    </td>
</tr><tr>
</tr>

Answer 1

而不是将每个 td 设置为 30% 的 table 行，使用嵌套 tables 可以帮助在不同的电子邮件阅读器中实现一致的显示，并阻止它们在更宽的视口中堆叠，设置 float:left; （或 display:inline-块）。

然后使用媒体查询根据需要将嵌套 table 的宽度设置为 100%。这是一个工作示例：http://codepen.io/panchroma/pen/pJYryK

典型代码为：

HTML

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>           
</head>  
...
<table class="wrapper">
  <tr>
    <td>
      <table class="nested"><tr><td>table 1</td></tr></table>
      <table class="nested"><tr><td>table 2</td></tr></table>
      <table class="nested"><tr><td>table 3</td></tr></table>
    </td>
  </tr>
</table>

CSS

table.nested{
  width:30%;
  float:left;
}

@media (max-width: 700px) {
  table.nested{
    width:100%;
  }
}

祝你好运！

Answer 2

最好的办法是使用 TH 而不是 TD。 android 中的 TD 不再适用于响应式设计。有关详细信息，请参阅 http://labs.actionrocket.co/。

TH 有一些怪癖（默认为 text-align:center 和 font-weight:bold）并且 padding 可能有点奇怪，但它仍然允许您在单个 table 而不是堆叠 tables.

虽然这有一些事情。

1.) Gmail 应用程序和那些不读取媒体查询的移动客户端在使用以下代码时仍将显示在第 3 列。要解决这个问题，您需要首先将其创建为移动版本（使用当前的媒体查询作为内联，然后在 sheet 样式中设置媒体查询、条件代码和最大宽度等以正确显示在桌面上。）说起来容易做起来难，并且需要使用 Email on Acid 或 Litmus 等工具进行大量测试。

2.) 一些 div 和按钮标签不是跨客户端组件table。在 HTML 电子邮件中查看 CSS 兼容性：https://www.campaignmonitor.com/css/ and here for creating cross-client buttons: http://buttons.cm/.

请参阅下面使用 TH 堆栈方法的代码：

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

<style>
@media screen and (max-device-width: 600px), screen and (max-width: 600px) {
th[class=colsplit]{width:100%!important; float:left!important; display:block !important;}
}
</style>
</head>

<body>
<table width="100%">
<div style="padding:20px; background-color:rgb(37,119,161);">
<tbody>
<tr>
    <th class="colsplit" style="width:30%; margin-bottom:5px; text-align:left; font-weight:normal;">
        <img src="http://au.clubmatestravel.com/panel/upload/thumbnails/0CM15037-4.jpg_listing" style="width:100%; height:250px;">
        <h3 style="text-decoration:underline; padding: 5px; color:orange; font-weight:bold;">Eureka Spa</h3>
        <h3 style="padding: 5px; color:orange;">Departing on: 10-08-2015</h3>
        <div style="overflow:hidden; height:200px; padding:20px; background-color:white;"><p>Make our way into Daylesford for some great bargain hunting. &nbsp;No visit to Daylesford is complete without a visit to the Chocolate Mill for some home-made chocolates and a nice hot chocolate!</p></div>
        <a href="http://au.clubmatestravel.com/holiday/Eureka-Spa"><button style=" display: inline-block;margin-bottom: 0;font-weight: 400;text-align: center;vertical-align: middle;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;border-radius: 4px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;width:100%; float:left;height:50px; color: #fff; background-color: #47a447; border-color: #398439; ">View</button></a>
        <a href="http://au.clubmatestravel.com/contact?mode=enquiry&amp;tour=122"><button style="  display: inline-block;margin-bottom: 0;font-weight: 400;text-align: center;vertical-align: middle;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;border-radius: 4px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;width:100%; float:left;height:50px; color: #fff; background-color: #47a447; border-color: #398439; ">Enquire</button></a>
    </th>

    <th class="colsplit" style="width:30%; margin-bottom:5px; text-align:left; font-weight:normal;">
        <img src="http://au.clubmatestravel.com/panel/upload/thumbnails/0CM15043-4.JPG_listing" style="width:100%; height:250px;">
        <h3 style="text-decoration:underline; padding: 5px; color:orange; font-weight:bold;">Mildura Music Festival </h3>
        <h3 style="padding: 5px; color:orange;">Departing on: 24-09-2015</h3>
        <div style="overflow:hidden; height:200px; padding:20px; background-color:white;"><p>Grab your hat and board the country music express. The country music kicks in as soon as you step onto the coach, and you will be <br>pumping out the vibes as you cruise the open highway up to the riverside town of Mildura. You will be bootscootin, shakin' your bootie, line dancing and any other way you like to do your thing!</p></div>
        <a href="http://au.clubmatestravel.com/holiday/Mildura-Music-Festival   "><button style=" display: inline-block;margin-bottom: 0;font-weight: 400;text-align: center;vertical-align: middle;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;border-radius: 4px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;width:100%; float:left;height:50px; color: #fff; background-color: #47a447; border-color: #398439; ">View</button></a>
        <a href="http://au.clubmatestravel.com/contact?mode=enquiry&amp;tour=123"><button style="  display: inline-block;margin-bottom: 0;font-weight: 400;text-align: center;vertical-align: middle;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;border-radius: 4px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;width:100%; float:left;height:50px; color: #fff; background-color: #47a447; border-color: #398439; ">Enquire</button></a>
    </th>

    <th class="colsplit" style="width:30%; margin-bottom:5px; text-align:left; font-weight:normal;">
        <img src="http://au.clubmatestravel.com/panel/upload/thumbnails/0CM15049-1.JPG_listing" style="width:100%; height:250px;">
        <h3 style="text-decoration:underline; padding: 5px; color:orange; font-weight:bold;">Wangaratta Jazz &amp; Blues</h3>
        <h3 style="padding: 5px; color:orange;">Departing on: 29-10-2015</h3>
        <div style="overflow:hidden; height:200px; padding:20px; background-color:white;"><p>Travel to the Jazz Festival and embrace all the goodness that Wangaratta has to offer!</p></div>
        <a href="http://au.clubmatestravel.com/holiday/Wangaratta-Jazz-and-Blues"><button style=" display: inline-block;margin-bottom: 0;font-weight: 400;text-align: center;vertical-align: middle;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;border-radius: 4px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;width:100%; float:left;height:50px; color: #fff; background-color: #47a447; border-color: #398439; ">View</button></a>
        <a href="http://au.clubmatestravel.com/contact?mode=enquiry&amp;tour=124"><button style="  display: inline-block;margin-bottom: 0;font-weight: 400;text-align: center;vertical-align: middle;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;border-radius: 4px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;width:100%; float:left;height:50px; color: #fff; background-color: #47a447; border-color: #398439; ">Enquire</button></a>
    </th>
</tr><tr>
    <th class="colsplit" style="width:30%; margin-bottom:5px; text-align:left; font-weight:normal;">
        <img src="http://au.clubmatestravel.com/panel/upload/thumbnails/0CM15048-2.jpg_listing" style="width:100%; height:250px;">
        <h3 style="text-decoration:underline; padding: 5px; color:orange; font-weight:bold;">WA Dolphin Delights</h3>
        <h3 style="padding: 5px; color:orange;">Departing on: 24-10-2015</h3>
        <div style="overflow:hidden; height:200px; padding:20px; background-color:white;"><p>Get to visit the amazing beaches and far less populated West. Prepare for a great time seeing the Dolphins. Be carried away by the <br>beautiful sights of Perth from Kings Park!</p></div>
        <a href="http://au.clubmatestravel.com/holiday/WA-Dolphin-Delights"><button style=" display: inline-block;margin-bottom: 0;font-weight: 400;text-align: center;vertical-align: middle;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;border-radius: 4px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;width:100%; float:left;height:50px; color: #fff; background-color: #47a447; border-color: #398439; ">View</button></a>
        <a href="http://au.clubmatestravel.com/contact?mode=enquiry&amp;tour=130"><button style="  display: inline-block;margin-bottom: 0;font-weight: 400;text-align: center;vertical-align: middle;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;border-radius: 4px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;width:100%; float:left;height:50px; color: #fff; background-color: #47a447; border-color: #398439; ">Enquire</button></a>
    </th>

    <th class="colsplit" style="width:30%; margin-bottom:5px; text-align:left; font-weight:normal;">
        <img src="http://au.clubmatestravel.com/panel/upload/thumbnails/0CM15040-1.JPG_listing" style="width:100%; height:250px;">
        <h3 style="text-decoration:underline; padding: 5px; color:orange; font-weight:bold;">Camels, Pearls &amp; Whales</h3>
        <h3 style="padding: 5px; color:orange;">Departing on: 03-09-2015</h3>
        <div style="overflow:hidden; height:200px; padding:20px; background-color:white;"><p>Discover the Dinosaurs footprints at low tide, have an exciting&nbsp;camel ride along Cable Beach, and enjoy how&nbsp;rich the wildlife&nbsp;is at the spectacular Broome!&nbsp;</p></div>
        <a href="http://au.clubmatestravel.com/holiday/Camels-Pearls-and-Whales"><button style=" display: inline-block;margin-bottom: 0;font-weight: 400;text-align: center;vertical-align: middle;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;border-radius: 4px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;width:100%; float:left;height:50px; color: #fff; background-color: #47a447; border-color: #398439; ">View</button></a>
        <a href="http://au.clubmatestravel.com/contact?mode=enquiry&amp;tour=131"><button style="  display: inline-block;margin-bottom: 0;font-weight: 400;text-align: center;vertical-align: middle;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;border-radius: 4px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;width:100%; float:left;height:50px; color: #fff; background-color: #47a447; border-color: #398439; ">Enquire</button></a>
    </th>

    <th class="colsplit" style="width:30%; margin-bottom:5px; text-align:left; font-weight:normal;">
        <img src="http://au.clubmatestravel.com/panel/upload/thumbnails/0CM15046-3.jpg_listing" style="width:100%; height:250px;">
        <h3 style="text-decoration:underline; padding: 5px; color:orange; font-weight:bold;">Sunset Markets</h3>
        <h3 style="padding: 5px; color:orange;">Departing on: 17-10-2015</h3>
        <div style="overflow:hidden; height:200px; padding:20px; background-color:white;"><p>Make your way to Berry Springs to the Territory Wildlife Park where you&nbsp;can view the wildlife up close, take a walk around the lagoon, go into the walk-through aquarium to view the amazing aquatic life and come nose to nose with a giant saltwater crocodile! This afternoon we are off to Berry Springs Nature Park for a refreshing swim. Don’t forget to wear your goggles so you can see many small native fish and other aquatic life that live in the clear pools. Wildlife is abundant!</p></div>
        <a href="http://au.clubmatestravel.com/holiday/Sunset-Markets"><button style=" display: inline-block;margin-bottom: 0;font-weight: 400;text-align: center;vertical-align: middle;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;border-radius: 4px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;width:100%; float:left;height:50px; color: #fff; background-color: #47a447; border-color: #398439; ">View</button></a>
        <a href="http://au.clubmatestravel.com/contact?mode=enquiry&amp;tour=135"><button style="  display: inline-block;margin-bottom: 0;font-weight: 400;text-align: center;vertical-align: middle;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;border-radius: 4px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;width:100%; float:left;height:50px; color: #fff; background-color: #47a447; border-color: #398439; ">Enquire</button></a>
    </th>
</tr><tr>
</tr>
</table>
</body>
</html>

使 Tr 元素移动兼容

Making Tr elements mobile compatible

html

css

html-email

responsive-design