Magento使用HTML代码元素创建响应式表格移动端溢出屏幕如何解决

• 定义的.responsive-table横向滚动容器类没有实际包裹<table>标签，overflow-x的滚动规则没有生效
• 写的.table样式类没有绑定到<table>元素上，100%宽度的规则没有作用到目标表格

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        padding: 8px 12px;
        text-align: left;
        border: 1px solid #ddd;
        /* 小屏避免文字强制折行影响可读性 */
        white-space: nowrap;
    }
    tbody tr:nth-child(odd) {
        background-color: #f2f2f2;
    }
    .responsive-table {
        overflow-x: auto;
        /* 可选：小屏左右加内边距避免贴边 */
        margin: 0 10px;
    }
</style>
<body>
    <!-- 用响应式容器包裹table，超出就出现横向滚动条 -->
    <div class="responsive-table">
        <table>
            <thead>
                <tr>
                    <th>型号</th>
                    <th>ETA认证</th>
                    <th>钻孔直径</th>
                    <th>最小钻孔深度</th>
                    <th>有效锚固深度</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>FIS H 12 x 50 K</td>
                    <td>是</td>
                    <td>12 [mm]</td>
                    <td>60 [mm]</td>
                    <td>50 [mm]</td>
                </tr>
                <tr>
                    <td>FIS H 12 x 85 K</td>
                    <td>是</td>
                    <td>12 [mm]</td>
                    <td>95 [mm]</td>
                    <td>85 [mm]</td>
                </tr>
                <tr>
                    <td>FIS H 16 x 85 K</td>
                    <td>是</td>
                    <td>16 [mm]</td>
                    <td>95 [mm]</td>
                    <td>85 [mm]</td>
                </tr>            
            </tbody>
        </table>
    </div>
</body>

如果不想要横向滚动，可以适配移动端转成卡片式布局，加以下媒体查询代码即可：

@media screen and (max-width: 768px) {
    table, thead, tbody, th, td, tr {
        display: block;
    }
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    tr {
        margin-bottom: 15px;
        border: 1px solid #ccc;
    }
    td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        white-space: normal;
        text-align: left;
    }
    td:before {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        font-weight: bold;
        content: attr(data-label);
    }
}

使用时需要给每个td加data-label属性，对应表头内容即可：

<td data-label="型号">FIS H 12 x 50 K</td>

内容的提问来源于stack exchange，提问作者Tom Baker