Html 按媒体查询将表列拆分为新行

我想知道，如果特定的媒体查询处于活动状态，是否可以将表列拆分为新行

<table class="table">
  <tr>
    <th class="column1"></th>
    <th class="column2"></th>
  </tr>
</table>

默认情况下，两个

th

相邻。但是如果触发了媒体查询，我希望

.column2

可以换一行

---

有什么建议吗？

你可以这样做：

表格{
宽度：100%；
填充：0px 50px；
}
.专栏1{
背景：红色；
高度：50px；
}
.专栏2{
背景：蓝色；
高度：50px；
}
@介质（最大宽度：768px）{
th{
宽度：100%；
显示：块；
利润率：10px 0px；
}
}