Как мне сделать, чтобы таблица становилась в один столбик, в четыре строки при просмотре с мобильных?

Question

[Петр Волханов]

Добрый вечер!

Помогите, пожалуйста, есть таблица с телефонами на странице Контактов.

HTML код таблицы:

<table class="phones">
<tbody>
<tr>
<td class="number"><img src="http://www.alkonarkostop.com.ua/wp-content/uploads/2017/01/vodafone.gif" alt="Vodafone"><a href="tel:[phone]">(099) 71-71-541</a></td>
<td class="number"><img src="http://www.alkonarkostop.com.ua/wp-content/uploads/2017/01/vodafone.gif" alt="Vodafone"><a href="tel:[phone]">[phone]</a></td>
</tr>
<tr>
<td class="number"><img src="http://www.alkonarkostop.com.ua/wp-content/uploads/2017/01/kyivstar.jpg" alt="Киевстар"><a href="tel:[phone]">[phone]</a></td>
<td class="number"><img src="http://www.alkonarkostop.com.ua/wp-content/uploads/2017/01/lifecell.png" alt="Lifecell"><a href="tel:[phone]">(063) 24-45-300</a></td>
</tr>
</tbody>
</table>

Я использую такие медиа-запросы для этой таблицы:

@media screen and (max-width: 50em) {
    .string{
        font-size:2.5em;
    }
    .number a{
    	font-size:1.5em;
    }
}
 
@media screen and (max-width: 40em) {
    .string{
        font-size:2em;
    }
    .number a{
    	font-size:1em;
    }
}
 
@media screen and (max-width: 30em) {
    .string{
        font-size:1.5em;
    }
    .number a{
    	font-size:0.5em;
    }
}

Как мне сделать, чтобы таблица становилась в один столбик, в четыре строки? Чтобы телефоны шли друг под другом, при просмотре на мобильных устройствах.

Comments

[Ярослав Иванов]

Вам надо таблицу через дивы делать . забудьте про table это раз и во-вторых никак не сделать. Можно с помощью js добавлять атрибуты чтобы изменять её но к чему геморрой.

Answer 1

[Justina Tenodzu]

добавить в медиа-запрос с нужным разрешением:
td.number {
display: block;
}