使Tr元素移动兼容

Question

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

这里的问题是<tr>不支持我将td元素设为100％宽度，因为其他元素都包含在<tr>容器中，而且我已经被告诉电子邮件客户建议表格式设计，所以我没有使用divs作为浮动不支持等PS对于凌乱的代码很抱歉，显然内联样式最适合电子邮件。以下是代码：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%;
  }
}  

祝你好运！