Magento HTML/CSS：表格响应答案

【问题标题】：Magento HTML/CSS: table responsiveMagento HTML/CSS：表格响应
【发布时间】：2021-12-18 05:12:49
【问题描述】：

我正在尝试使用 Magento 中的 HTML 代码元素创建一个表格。我曾尝试使用响应式媒体类型，但它仍在移动设备上超出屏幕范围。

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

【问题讨论】：

标签： html css magento

【解决方案1】：

选择器 .table 错误。使用元素选择器，并删除“.”。

【讨论】：

抱歉，因为我是使用 Magento 的新手（1 周），我已经附上了完整 HTML 代码的屏幕截图以及我们的机构为我们创建的可用模块。 Screenshot

【解决方案2】：

试试这个。

    .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>

【讨论】：

请解释你的代码
html 代码中没有提到类（响应表和表），这就是 CSS 无法正常工作的原因。