MagentoHTML/CSS：表格回應-有解無憂

我正在嘗試使用 Magento 中的 HTML 代碼元素創建一個表格。我曾嘗試使用回應式媒體型別，但它仍然在移動設備上超出螢屏范圍。

Magento 回應式桌面移動設備

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

uj5u.com熱心網友回復：

選擇器 .table 是錯誤的。使用元素選擇器，并洗掉“.”。

uj5u.com熱心網友回復：

嘗試這個。

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/366770.html

標籤：html css 马恩托

上一篇：使用ajax更新購物車專案計數時，獲取window.checkout.quoteData或商店代碼是未定義的錯誤

下一篇：如何增加Magento2中頁面的快取過期時間