在td中居中/样式化三个表（用于响应式电子邮件模板）

Question

以下HTML代码：

<style>
table,tr,td{
    min-width:80px;
    min-height:80px;
    border:1px #B0B0B0 solid;
}

table.v_headtable{
width:100%;
margin:0 auto;
max-width:640px;
text-align:center;
}

</style>


<table align="center" class="v_headtable">
.
.
.
.
.
.
<tr>
    <td class="row rsocial">
        <table class="socialIcons">
            <tr><td><img src="../../Twitter.png" width="30" /></td></tr>
        </table>
        <table class="socialIcons">
            <tr><td><img src="../../fb.png" width="30" /></td></tr>
        </table class="socialIcons">
        <table height="30" class="socialIcons">
            <tr><td height="30"><img src="../../LinkedIn.png" width="30" /></td></tr>
        </table>
    </td>
</tr>

在上面的代码中，我无法将表格排成一行。我希望桌子能够在较大的屏幕上保持居中，而在移动设备上它应该向下移动

当前输出：

必需的输出：

Answer 1

将此CSS应用于.socialIcons课程：

.socialIcons {
    display: inline-block;
}