使 Tr 元素移动兼容

Question

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

这里的问题是 <tr> 不支持我将 td 元素设置为 100% 宽度，因为其他元素包含在 <tr> 容器内，并且我被告知电子邮件客户建议使用表格设计，所以我还没有将 div 用作不支持的浮点数等。抱歉代码混乱，显然内联样式最适合电子邮件。这是代码：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

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

TH 有一些怪癖（默认为 text-align:center 和 font-weight:bold）并且填充可能有点奇怪，但它仍然允许您在单个表中使用块堆栈方法而不是堆叠表格。

不过，这有几件事。

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

2.) 一些 div 和按钮标签不是跨客户端兼容的。有关 HTML 电子邮件中 ​​CSS 兼容性的信息，请参见此处：https://www.campaignmonitor.com/css/，有关创建跨客户端按钮的信息请参见此处：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>

Answer 2

代替将每个 td 设置为 30% 的表格行，使用嵌套表格可以帮助在不同的电子邮件阅读器中实现一致的显示，并阻止它们在更宽的视口处堆叠，设置 float:left; （或显示：内联块）。

然后根据需要使用媒体查询将嵌套表的宽度设置为 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%;
  }
}  

祝你好运！