我有一个表格,它通常以水平模式显示数据。我想在网格系统等移动模式下将单元格方向顺序更改为底部。
这段代码是我在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>
最佳答案
试试
@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;
}
}
关于css - 在移动设备中将表格方向更改为垂直模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58706866/