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

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;
}
}

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

使用display: block，您可以

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