通过媒体查询将表格列拆分为新行

Question

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

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

默认情况下，th彼此相邻。但是如果触发媒体查询，我希望.column2进入新行。

有什么建议吗？

Answer 1

你可以这样做：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;