将表方向更改为mobil中的垂直模式

Question

我有一张桌子，通常在水平模式下显示数据。我想像网格系统一样在mobil模式下将单元方向顺序更改为底部。

我以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>

Answer 1

尝试使用

@media screen and (max-width: 500px) {
 td {
    display: table-row;
  }
}