如何在没有媒体查询的情况下响应式地调整 3 个按钮的大小
我在一封电子邮件中连续有 3 个按钮。当在移动屏幕上查看时，它们会被压扁，如下图所示。
有人可以帮助我如何调整这些内容的大小，以便在没有媒体查询的情况下在移动屏幕上以“正常”方式阅读（这是一封电子邮件，因此我所有的样式都是内联的） ）。
任何解决方案都可以——只要措辞不显得被压扁。
<tbody style="padding-top:10px">
<tr style="border-collapse:collapse">
<td valign="top" align="center" style="border-collapse:collapse;padding:5px 0">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;border-spacing:33px 2px">
<tbody>
<tr style="border-collapse:collapse">
<td bgcolor="#fae231" valign="top" align="center" style="border-collapse:collapse;padding:13px 17px;border-radius:8px;background-color:#fae231">
<a href="https://fluf.io/profile/?testaccountgt/orders/view-order/7501" style="line-height:1.5;text-decoration:none;word-break:break-word;font-weight:500;display:block;font-family:'Fira Sans',Helvetica,Arial,sans-serif;font-size:16px;color:#161616" target="_blank"
data-saferedirecturl="https://www.google.com/url?q=https://fluf.io/profile/?testaccountgt/orders/view-order/7501&source=gmail&ust=1646256195425000&usg=AOvVaw3u-T-1Gq8L6jxeAo388tcD">View order</a>
</td>
<td bgcolor="#fae231" valign="top" align="center" style="border-collapse:collapse;padding:13px 17px;border-radius:8px;background-color:#fae231">
<a style="line-height:1.5;text-decoration:none;word-break:break-word;font-weight:500;display:block;font-family:'Fira Sans',Helvetica,Arial,sans-serif;font-size:16px;color:#161616">Track order</a>
</td>
<td bgcolor="#fae231" valign="top" align="center" style="border-collapse:collapse;padding:13px 17px;border-radius:8px;background-color:#fae231">
<a href="https://fluf.io/outlets//reviews/" style="line-height:1.5;text-decoration:none;word-break:break-word;font-weight:500;display:block;font-family:'Fira Sans',Helvetica,Arial,sans-serif;font-size:16px;color:#161616" target="_blank" data-saferedirecturl="https://www.google.com/url?q=https://fluf.io/outlets//reviews/&source=gmail&ust=1646256195425000&usg=AOvVaw2n8CPAJtw95Aum6KO_PqNR">Submit a Review</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>I have 3 buttons in a row in an email. When this is viewed on a mobile screen, they are squashed per the picture below.
Can someone please help with how I can size these to be read in a "normal" manner on a mobile screen without media queries (this is an email, so all my styling is in-line).
Any solution is fine - as long as the wording doesn't appear to be squashed.
<tbody style="padding-top:10px">
<tr style="border-collapse:collapse">
<td valign="top" align="center" style="border-collapse:collapse;padding:5px 0">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;border-spacing:33px 2px">
<tbody>
<tr style="border-collapse:collapse">
<td bgcolor="#fae231" valign="top" align="center" style="border-collapse:collapse;padding:13px 17px;border-radius:8px;background-color:#fae231">
<a href="https://fluf.io/profile/?testaccountgt/orders/view-order/7501" style="line-height:1.5;text-decoration:none;word-break:break-word;font-weight:500;display:block;font-family:'Fira Sans',Helvetica,Arial,sans-serif;font-size:16px;color:#161616" target="_blank"
data-saferedirecturl="https://www.google.com/url?q=https://fluf.io/profile/?testaccountgt/orders/view-order/7501&source=gmail&ust=1646256195425000&usg=AOvVaw3u-T-1Gq8L6jxeAo388tcD">View order</a>
</td>
<td bgcolor="#fae231" valign="top" align="center" style="border-collapse:collapse;padding:13px 17px;border-radius:8px;background-color:#fae231">
<a style="line-height:1.5;text-decoration:none;word-break:break-word;font-weight:500;display:block;font-family:'Fira Sans',Helvetica,Arial,sans-serif;font-size:16px;color:#161616">Track order</a>
</td>
<td bgcolor="#fae231" valign="top" align="center" style="border-collapse:collapse;padding:13px 17px;border-radius:8px;background-color:#fae231">
<a href="https://fluf.io/outlets//reviews/" style="line-height:1.5;text-decoration:none;word-break:break-word;font-weight:500;display:block;font-family:'Fira Sans',Helvetica,Arial,sans-serif;font-size:16px;color:#161616" target="_blank" data-saferedirecturl="https://www.google.com/url?q=https://fluf.io/outlets//reviews/&source=gmail&ust=1646256195425000&usg=AOvVaw2n8CPAJtw95Aum6KO_PqNR">Submit a Review</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果您使用表格，则没有响应方式，因为如果宽度不够，表格将不会分成 elss 列。您可以做的一件事是将
display:block;更改为display:inline-block。然后使用white-space: nowrap来防止按钮内出现换行符：There is no responsive way if you use a table as the tables will not break into elss columns if there is not enough width. The one thing you can do is to change
display:block;todisplay:inline-block. Then usewhite-space: nowrapto prevent a linebreak within the button:最后遵循@Nathan的建议，选择在表数据元素上使用display:table-row来堆叠表。
但不确定如何切换它，使桌面版为 1 行，移动版为 3 行（在没有媒体查询的情况下 - 再次给出，这是一封电子邮件）。刚刚去了 3 排，没问题。
followed @Nathan's advice in the end and chose to stack the table using display:table-row on the table data elements.
Was unsure however how to toggle it such that desktop is 1 row and mobile is 3 (in the absence of media queries - given again, it's an email). Have just gone for 3 rows and fine with that.