时间戳

首页 > 解决方案 > 如何使用表格开发一种联系表格，但删除移动设备的表格？

wordpress - 如何使用表格开发一种联系表格，但删除移动设备的表格？

问题描述

我开发了一个带有表格的联系表格 7 表格，以便将列放在一起，效果很好，但在移动设备上看起来很糟糕，有谁知道我如何才能删除仅用于移动设备的表格？

例如，在 pc 上，我希望列彼此相邻，就像在移动设备上一样，我希望它在彼此下方。

联系表格的图片

这也是我的代码，

<table>
<tr>
<td>


<label> Your Name        
  [text* your-name] </label> 
</td>
<td>
<label> Your Cellphone Number 
[text* your-cell] </label>
</td>
</tr>


<tr>
<td><label> Are you attending the wedding?</label>[select* ATTENDANCE include_blank "YES" "NO"]</td>

<td><label> Guests?</label>[select* Guests "0" "1"]</td>
</tr>
</table>



[submit "Send"]

标签： wordpresscontact-formcontact-form-7

解决方案

使用 div 而不是表格单元格，以获得最佳灵活性。您可以使用媒体查询来根据用户屏幕大小更改 div 的宽度、样式甚至顺序。例如：

.mydiv {width:100%;}
@media screen and (min-width:992px) {
  .mydiv {width:50%);
}

但是，如果您出于某种原因必须使用表格，您可以使用 MailChimp 的这种两列折叠式电子邮件设计，它也可以完成您正在寻找的内容（但代码更多，灵活性更小......）：https://templates.mailchimp.com/development/responsive-email/responsive-column-layouts/

推荐阅读