我想知道如果特定媒体查询处于事件状态,我是否可以将表列拆分为新行。
<table class="table">
<tr>
<th class="column1"></th>
<th class="column2"></th>
</tr>
</table>
默认情况下,th
彼此相邻。但我希望 .column2
在触发媒体查询时换行。
有什么建议吗?
最佳答案
你可以这样做:
table {
width:100%;
padding:0px 50px;
}
.column1 {
background:red;
height:50px;
}
.column2 {
background:blue;
height:50px;
}
@media (max-width:768px) {
th {
width:100%;
display: block;
margin:10px 0px;
}
}
<table class="table">
<tr>
<th class="column1"></th>
<th class="column2"></th>
</tr>
</table>
关于html - 通过媒体查询将表列换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25917319/