如何通过Media Query拆分Skill Certification表格，解决溢出并调整布局

步骤1：调整HTML结构 #

修改表格结构，为每个员工行添加默认隐藏的技能矩阵子行，用于小屏幕下展示拆分后的内容：

<div class="col-md-12 mg-b-15">
    <div class="annual-training-plan sdm-box skill-certification">
        <div class="row">
            <div class="sdm-title col-md-6">
                <h3>技能认证与部署矩阵</h3>
            </div>
            <div class="demo-table col-md-6">
                <table>
                    <tr>
                        <td><span class="foo blue"> </span></td>
                        <td><span> 计划中</span></td>
                        <td><span class="foo yellow"> </span></td>
                        <td><span> 待重新认证</span></td>
                        <td><span class="foo green"> </span></td>
                        <td><span> 已认证</span></td>
                        <td><span class="foo gray"> </span></td>
                        <td><span> 无计划</span></td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="matrix-graph">
            <table id="deploymentMatrixTbl" class="table-striped">
                <thead>
                    <tr>
                        <th scope="col" class="wd-20p emp-detail">员工姓名</th>
                        <th scope="col" class="wd-15p emp-detail">员工ID</th>
                        <th scope="col" class="wd-15p emp-detail">部门</th>
                        <th scope="col" class="wd-7p emp-detail">职位</th>
                        <th scope="col" class="wd-90p skill-matrix-header">技能认证与部署矩阵</th>
                    </tr>
                </thead>

                <tbody>
                    <!-- 示例员工行 -->
                    <tr class="employee-row">
                        <td>张三</td>
                        <td>E001</td>
                        <td>技术部</td>
                        <td>开发工程师</td>
                        <td class="skill-matrix-cell">
                            <!-- 原技能矩阵状态标记 -->
                            <span class="foo green"></span>
                            <span class="foo blue"></span>
                            <!-- 更多技能状态... -->
                        </td>
                    </tr>
                    <!-- 拆分后的技能矩阵子行（默认隐藏） -->
                    <tr class="skill-matrix-row hidden">
                        <td colspan="4">
                            <div class="skill-matrix-content">
                                <!-- 复制原技能矩阵内容 -->
                                <span class="foo green"></span>
                                <span class="foo blue"></span>
                                <!-- 更多技能状态... -->
                            </div>
                        </td>
                    </tr>

                    <!-- 无数据状态（按需保留） -->
                    <!-- <tr><td colspan="5">暂无数据。</td></tr> -->
                </tbody>
            </table>
        </div>
    </div>
</div>

步骤2：添加CSS媒体查询 #

通过媒体查询在小屏幕下切换布局，隐藏原技能列并显示拆分后的子行：

/* 默认隐藏技能矩阵子行 */
.skill-matrix-row.hidden {
    display: none;
}

/* 小屏幕适配（可根据需求调整宽度阈值） */
@media (max-width: 768px) {
    /* 隐藏原表格中的技能矩阵表头和单元格 */
    .skill-matrix-header,
    .skill-matrix-cell {
        display: none;
    }

    /* 显示拆分后的技能矩阵子行 */
    .skill-matrix-row.hidden {
        display: table-row;
    }

    /* 优化子行内容排版 */
    .skill-matrix-content {
        padding: 10px;
        background-color: #f8f9fa;
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
    }

    /* 调整员工信息列宽度，占满整行 */
    .emp-detail {
        width: 25% !important;
    }
}

核心逻辑 #

小屏幕下将原本单列的技能矩阵内容，拆分为独立行并通过colspan="4"跨占所有员工信息列宽度，避免横向溢出；同时隐藏原技能列，保证内容完整且适配移动端。可根据实际需求调整媒体查询宽度阈值和子行样式。

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