Menu
I would like to know if I can break 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 .column2 to break into a new line if a media query is triggered.
Any advice?
558
In the input box to the right of Other press Ctrl + J to insert a line break as your delimiter. You should see dividers appear in the Data preview pane where there are line breaks in your data. Press the Next button.
At every juncture in which the content needs a change in layout, a breakpoint is added. This makes media queries easier to code and manage. A good rule to follow in this regard is to add a breakpoint when the content looks misaligned. Visualize a paragraph of text.
Add the br in your code, hide it using css initially and make it display: inline in media queries when the width meets your requirement br { display: none; } @media all and (max-width: 480px) { .break2 { display: inline } } @media all and (max-width: 320px) { br { display: inline } }
A common use of media queries, is to create a flexible layout. In this example, we create a layout that varies between four, two and full-width columns, depending on different screen sizes: Tip: A more modern way of creating column layouts, is to use CSS Flexbox (see example below).
You could 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
