Измените направление таблицы на вертикальный режим в мобильном

Question

У меня есть таблица, и она обычно отображает данные в горизонтальном режиме. Я хочу изменить порядок направления ячеек на дно в режиме мобил, как в сетке.

Я написал этот код в стиле css:

 @media screen and (max-width: 500px) {

  img {
    height: 450px;
    width: 450px;
    border-radius: 20px;
  }

 tr, td, th {
    display: block;
    padding: 5px;
    width: 480px;
  }

Направление в порядке с этим кодом, но таблица тоже имеет деформацию, отступы и ширина ничего не меняют. Я пробовал другие разделы отображения, такие как сетка, таблица, таблица-строка, но я не мог сделать это.

Пожалуйста, помогите, как я могу исправить это.

HTML

<table class="kadir">
<tbody>
<tr>
<td><img src="http://www.bizimduvar.com/wp-content/uploads/2018/08/bizimduvar.png" alt="" /></td><td>cell2_1</td><td>cell3_1</td><td>cell4_1</td></tr>
<tr>
<td><img src="http://www.bizimduvar.com/wp-content/uploads/2018/08/bizimduvar.png" alt="" /></td><td>cell2_2</td><td>cell3_2</td><td>cell4_2</td></tr>
<tr>
<td><img src="http://www.bizimduvar.com/wp-content/uploads/2018/08/bizimduvar.png" alt="" /></td><td>cell2_3</td><td>cell3_3</td><td>cell4_3</td></tr>
<tr>
<td><img src="http://www.bizimduvar.com/wp-content/uploads/2018/08/bizimduvar.png" alt="" /></td><td>cell2_3</td><td>cell3_3</td><td>cell4_3</td></tr>
</tbody>
</tr>
</table>