Как разработать одну контактную форму с таблицами, но удалить таблицы для мобильных устройств?

Question

Я разработал форму контактной формы 7 с таблицами, чтобы поставить столбец рядом друг с другом, он отлично работает, но на мобильных устройствах это выглядит ужасно, кто-нибудь знает, как я могу удалить таблицы только для мобильных устройств?

*Например, на компьютере 1002 *. Я хочу, чтобы столбец находился рядом друг с другом, как на мобильном устройстве, и на мобильном устройстве. Я хочу, чтобы столбец находился под ним.

Изображение контактной формы

вот и мой код,

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

Answer 1

Используйте div вместо ячеек таблицы, для лучшей гибкости.Вы можете использовать медиа-запросы для изменения ширины, стилей и даже порядка элементов в зависимости от размера экрана пользователя.Например:

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

Но если вам по какой-то причине нужно использовать таблицы, вы можете использовать этот двухколонный свернутый дизайн электронной почты от MailChimp, который также достиг бы того, что вы ищете (но с большим количествомбольше кода и намного меньше гибкости ...): https://templates.mailchimp.com/development/responsive-email/responsive-column-layouts/