Q: Magento HTML/CSS: table responsive 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>


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

A: 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>


