使表格按钮在小屏幕上变为全宽

Question

试图使基于边框的按钮在小屏幕上全宽。需要通过CSS和HTML工作，因为这适用于无法使用JS的电子邮件。

有什么想法吗？

尝试使用媒体查询，但没有用。

附言边框按钮描述如下：https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design

.container {
width: 100%;
height: 300px;
background-color: #000000;
}
.link-button {
font-size: 16px; 
font-family: Helvetica, Arial, sans-serif; 
color: #ffffff; 
text-decoration: none; 
border-radius: 20px; 
-webkit-border-radius: 20px; 
-moz-border-radius: 20px; 
background-color: #EB7035; 
border-top: 12px solid #EB7035; 
border-bottom: 12px solid #EB7035; 
border-right: 18px solid #EB7035; 
border-left: 18px solid #EB7035; 
display: inline-block;
}
@media only screen and (max-width: 480px) {
.inner-table {
width: 100%;
}
}

<div class="container">

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="outer-table">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" class="inner-table">
<tr>
<td>
<a class="link-button" href="http://google.com" target="_blank">I am a button</a>
</td>
</tr>
</table>
</td>
</tr>
</table>

</div>

Answer 1

尝试为较小的屏幕添加最小宽度

Answer 2

对于其他任何人，答案是将 .link-button 类设置为块而不是内联块。

.inner-table {
text-align: center;
}
.link-button {
font-size: 16px; 
font-family: Helvetica, Arial, sans-serif; 
color: #ffffff; 
text-decoration: none; 
border-radius: 20px; 
-webkit-border-radius: 20px; 
-moz-border-radius: 20px; 
background-color: #EB7035; 
border-top: 12px solid #EB7035; 
border-bottom: 12px solid #EB7035; 
border-right: 18px solid #EB7035; 
border-left: 18px solid #EB7035; 
display: inline-block;
}
@media screen and (max-width: 480px) {
.link-button {
display: block !important;
}
}

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="outer-table">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" class="inner-table" width="100%" >
<tr>
<td>
<a class="link-button" href="http://google.com" target="_blank">I am a button</a>
</td>
</tr>
</table>
</td>
</tr>
</table>

感谢@CBroe在评论中提供了这个答案。