Иногда нужно заменить старую табличную верстку (HTML таблицу), на отзывчивую (Responsive), правильный вариант, это переверстать (на эту тему есть заметка Замена таблиц на flexbox ), но иногда это слишком затратно по ресурсам.
Тут есть простое решение - превратить таблицу в flexbox
<style type="text/css">
table td
{
border: 1px solid #a9a6a3;
padding: 3px;
}
@media only screen and (max-width: 768px) {
table td
{
flex-direction: row;
display: flex;
}
}
</style>
<table>
<tr>
<td>Left 1</td>
<td>Center 1</td>
<td>Right 1</td>
</tr>
<tr>
<td>Left 2</td>
<td>Center 2</td>
<td>Right 2</td>
</tr>
<tr>
<td>Left 3</td>
<td>Center 3</td>
<td>Right 3</td>
</tr>
</table>