Split table column into a new row for media queries
I would like to know if I can split a table column to a new row if a specific media query is active.
<table class="table">
<tr>
<th class="column1"></th>
<th class="column2"></th>
</tr>
</table>
by default both th
are next to each other. But I want to .column2
break to a new line if a media query is running.
Any advice?
+3
source to share
1 answer
You can do it like this:
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>
+7
source to share