Magento HTML/CSS: table responsive-CodePudding

I am trying to create a table using the HTML Code Element within Magento. I have attempted using responsive media types, but it is still stretching off the screen on mobile.

Magento Responsive Table 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>

CodePudding user response：

The selector .table ist wrong. User the element selector, and remove the ".".

CodePudding user response：

Try this.

    .table {
        width: 100%;
        border-collapse: collapse;
    }
    tbody tr:nth-child(odd) {
        background-color: #f2f2f2;
    }
    .responsive-table {
        overflow-x: auto;
    }

<div class="responsive-table">
    <table class="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>
</div>