After reading through this question on Stack Overflow, about creating a responsive table with both vertical and horizontal headers, I came across this particular issue, demonstrated in this codepen example:
Currently, the second table appears directly below the first one. I have managed to push it below by adding multiple <br> elements, but I'm sure there must be a more efficient way to achieve this...
Here is the CSS code I am using:
.aa table {
border-collapse: collapse;
}
.aa td, .aa th {
border: 1px #ddd solid;
}
.aa table {
margin: 20px 0;
}
.aa td, .aa th {
padding: 10px;
}
@media all and (min-width: 640px) {
.aa table {
float: left;
display: block;
}
.aa table ~ table td,
.aa table ~ table th { border-left: 0; }
.aa table ~ table tr:first-child th:first-child { display: none; }
.aa table ~ table tr:not(:first-child) th { display: none; }
}
And here is the corresponding HTML code:
<!-- Table 1 -->
<h3>Table 1</h3>
<div class='aa'>
<table>
<tr>
<th></th>
<th scope="col">BMW</th>
</tr>
<tr>
<th scope="row">GPS</th>
<td>12001</td>
</tr>
<tr>
<th scope="row">Bluetooth</th>
<td>7001</td>
</tr>
<tr>
<th scope="row">Sensors</th>
<td>12301</td>
</tr>
</table>
<table>
...