html - 通过媒体查询将表列换行

Question

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

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

默认情况下，th 彼此相邻。但我希望 .column2 在触发媒体查询时换行。

有什么建议吗？

Answer 1

你可以这样做:

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>