I am working on a basic app featuring a simple table with four columns. My goal is to make the table responsive, with each column stacking vertically below the other. I am searching for a solution that does not involve the use of Javascript.
Currently, my table looks like this:
+---------------+
| Some text |
+---------------+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+
Here is the layout I am aiming for when viewing on smaller screens:
| A | B | C | D |
+---+---+-
| A | B |
+---+---+
| A | B |
+---+---+
| A | B |
+---+---+
| C | D |
+---+---+
| C | D |
+---+---+
| C | D |
+---+---+
Is there a way to achieve this layout? Any assistance provided through JSfiddle would be greatly appreciated. You can view my sample code on JSfiddle.
Below is the HTML code:
<table>
<tbody>
[Table content goes here]
</tbody>
</table>
And here is the associated CSS:
@media all and (max-width:768px){
tr{
display: inline;
float: left;
}
td{
display: block;
}
}
Please note that I am not using Bootstrap for this project.