I'm looking to format the table data in a column-row layout for mobile devices. Can anyone provide an example or guidance on how to achieve this? I've browsed through some discussions but haven't found a solution that works with tables.
The table structure is as follows:
table, th, td {
border:1px solid black;
}
@media screen and (max-width: 768px) {
}<!DOCTYPE html>
<body>
<h2>A basic HTML table</h2>
<table style="width:100%">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
</body>