I'm having trouble formatting a table on my Magento website using the HTML Code Element. Even with responsive media types, the table is still extending off the screen on mobile devices.
Check out my Magento Responsive Table for Mobile
<style>
.table {
width: 100%;
border-collapse: collapse;
}
tbody tr:nth-child(odd) {
background-color: #f2f2f2;
}
.responsive-table {
overflow-x: auto;
}
</style>
<body>
<table>
<thead>
<tr>
<th>Variant</th>
<th>ETA-approval</th>
<th>Drill diameter</th>
<th>Min. drill hole depth</th>
<th>Effect. anchorage depth</th>
</tr>
</thead>
<tbody>
<tr>
<td>FIS H 12 x 50 K</td>
<td>Yes</td>
<td>12 [mm]</td>
<td>60 [mm]</td>
<td>50 [mm]</td>
</tr>
<tr>
<td>FIS H 12 x 85 K</td>
<td>Yes</td>
<td>12 [mm]</td>
<td>95 [mm]</td>
<td>85 [mm]</td>
</tr>
<tr>
<td>FIS H 16 x 85 K</td>
<td>Yes</td>
<td>16 [mm]</td>
<td>95 [mm]</td>
<td>85 [mm]</td>
</tr>
</tbody>
</table>
</body>