css: display column as row in mobile view - html

Question

I want to display table column as row, when someone open page in mobile (less than 480px).
This is my table structure.
table, th, td {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
#media(max-width: 480px) {
.main td {
display: table-row;
}
}
<p>
In desktop View
</p>
<table class="main">
<tr>
<td>R1 Col 1</td>
<td>R1 Col 2</td>
</tr>
<tr>
<td>R2 Col 1</td>
<td>R2 Col 2</td>
</tr>
<tr>
<td>R3 Col 1</td>
<td>R3 Col 2</td>
</tr>
</table>
I tried to do using css like.
#media(max-width: 480px) {
.main td {
display: table-row;
}
}
But it is not working. In Mobile view I want output like this, Second column should display below first column.
Note: I can't change table to div.
This is my expected output:

Answer 1

You will need to break the table-layout via resets on display.
grid or flex can then allow you to reorder your elements
example
table,
th,
td {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
#media(max-width: 480px) {
.main tbody {
display: grid;
}
.main tr {
display: contents;
border:solid red
}
.main td {
display: block;
}
.main tr td + td {
order: 1;
}
}
<p>
In desktop View
</p>
<table class="main">
<tr>
<td>R1 Col 1</td>
<td>R1 Col 2</td>
</tr>
<tr>
<td>R2 Col 1</td>
<td>R2 Col 2</td>
</tr>
<tr>
<td>R3 Col 1</td>
<td>R3 Col 2</td>
</tr>
</table>
explanation :
the browser will generate a tbody wrapper, you can reset display from than one and keep the table display behavior on the <table>element so it keeps shrinking. Let's make that tbody a grid (defaut of display:grid is to draw a single column).
tr are in the way, display:contents will remove them virtually, so the cells (td) can be (virtually) direct child of tbody and be reorder via .. order. You can give here via tr >:nth-child(x){order:X;} an order to each cells.
ressource:
https://css-tricks.com/snippets/css/complete-guide-grid/
https://developer.mozilla.org/en-US/docs/Web/CSS/display
display contents
These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes. Please note that the CSS Display Level 3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered purely by CSS box concepts such as replaced elements.

Answer 2

If you can't change the table structure then it is very difficult achieve the desired result. But if it is fixed row and column then you can use some CSS trick to bring the result.
You can reduce the browser width and see the below snippet.
#media(max-width: 480px) {
.main td{
margin-top:63px
}
.main td:last-child {
position:absolute;
left:8px;
}
}
table, th, td {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
#media(max-width: 480px) {
.main td{
margin-top:63px
}
.main td:last-child {
position:absolute;
left:8px;
}
}
<p>
In desktop View
</p>
<table class="main">
<tr>
<td>R1 Col 1</td>
<td>R1 Col 2</td>
</tr>
<tr>
<td>R2 Col 1</td>
<td>R2 Col 2</td>
</tr>
<tr>
<td>R3 Col 1</td>
<td>R3 Col 2</td>
</tr>
</table>
JS FIDDLE DEMO

Answer 3

adding display block to td and tr will force them to behave like block level element, try if it works for you
table, th, td {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
#media(max-width: 480px) {
.main tr, .main td {
display: block;
}
}
<table class="main">
<tr>
<td>R1 Col 1</td>
<td>R1 Col 2</td>
</tr>
<tr>
<td>R2 Col 1</td>
<td>R2 Col 2</td>
</tr>
<tr>
<td>R3 Col 1</td>
<td>R3 Col 2</td>
</tr>
</table>