在移动设备中将表格方向更改为垂直模式

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>

Answer 1

试试

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

将 TDs 从包含在行中的单元格转换为行本身，但使用 table-row 您不能指定边距。

display: block 你可以

@media screen and (max-width: 500px) {
  td {
    display: block;
    margin: 2px;
  }
}