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

【问题标题】：How to develop one contact form with tables but remove the tables for mobile devices?如何使用表格开发一种联系表格，但删除移动设备的表格？
【发布时间】：2019-03-13 00:07:11
【问题描述】：

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

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

Image of the contact form

这也是我的代码，

<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"]

【问题讨论】：

标签： wordpress contact-form contact-form-7

【解决方案1】：

使用 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/

【讨论】：