I have the following HTML Table
<table>
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
</tr>
<tr>
<td>Cell 3.1</td>
<td>Cell 3.2</td>
<td>Cell 3.3</td>
</tr>
</table>
Naturally the above table is displayed as follows
----------------------------------
| Cell 1.1 | Cell 1.2 | Cell 1.3 |
----------------------------------
| Cell 2.1 | Cell 2.2 | Cell 2.3 |
----------------------------------
| Cell 3.1 | Cell 3.2 | Cell 3.3 |
----------------------------------
So what I like to do is create a responsive design, so that when the web-page is viewed in desktop screen, the table is displayed as above, but when the web-page is viewed in a mobile screen, the table is displayed as below
------------
| Cell 1.1 |
------------
| Cell 2.1 |
------------
| Cell 3.1 |
------------
------------
| Cell 1.2 |
------------
| Cell 2.2 |
------------
| Cell 3.3 |
------------
------------
| Cell 1.3 |
------------
| Cell 2.3 |
------------
| Cell 3.3 |
------------
I like to use ONLY CSS to achieve the above. It should look something like this
/* CSS RULES FORE MOBILE */
/* Add here CSS code that makes the table traverse vertically */
@media screen and (min-width: 1280) {
/* CSS RULES FORE DESKTOP */
/* Rest CSS rules, to display the table for desktop */
}
I am not sure how to do it, or how to approach this thing altogether. Your help is appreciated. Thanks.
tr
tag. CSS Grid could be of benefit here if you can forego the semantics of thetable
tag.