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

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>