如何实现HTML表格的屏幕响应式适配？移动端适配求助

针对你的补充成分表表格，下面是修改后的完整代码，能在全屏幕尺寸下稳定适配，解决移动端截断显示不全的问题：

<style>
/* 基础表格样式 */
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%; /* 默认占满容器宽度，解决原40%宽度适配性差的问题 */
    margin: 0 auto; /* 居中显示 */
}

td, th {
    border: 1px solid black;
    padding: 8px;
}

th {
    background-color: #ffffff;
    color: black;
    text-align: left;
}

/* 大屏幕列宽设置，保持布局合理性 */
td:nth-child(1), th:nth-child(1) {
    width: 60%; /* 加宽第一列，适配长文本内容 */
    text-align: left;
}

td:nth-child(2), th:nth-child(2) {
    width: 20%;
    text-align: right;
}

td:nth-child(3), th:nth-child(3) {
    width: 20%;
    text-align: right;
}

/* 行背景色交替效果 */
tr:nth-child(even) {
    background-color: #f2f2f2;
}

tr:nth-child(odd) {
    background-color: #ffffff;
}

/* 小屏幕响应式适配逻辑 */
@media only screen and (max-width: 768px) {
    /* 外层容器添加横向滚动，作为内容溢出时的保底方案 */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* 优化移动端滚动顺滑度 */
    }

    /* 将表格元素改为块级布局，实现纵向堆叠 */
    table, thead, tbody, th, td, tr {
        display: block;
    }

    /* 隐藏原表头，改用伪元素显示 */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        margin-bottom: 15px;
        border: 1px solid #ddd;
    }

    td {
        border: none;
        border-bottom: 1px solid #ddd;
        position: relative;
        padding-left: 50%; /* 预留空间放置伪元素表头 */
        text-align: left;
    }

    /* 给每个单元格添加对应表头文字的伪元素 */
    td:nth-of-type(1):before {
        content: "营养成分";
    }
    td:nth-of-type(2):before {
        content: "每份含量";
    }
    td:nth-of-type(3):before {
        content: "每日摄入量占比";
    }

    /* 伪元素样式调整 */
    td:before {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: bold;
        text-align: left;
    }

    /* 针对合并列的特殊处理，保持标题类内容的展示效果 */
    td[colspan="3"], th[colspan="3"] {
        padding-left: 0;
        text-align: center;
    }
    td[colspan="3"]:before, th[colspan="3"]:before {
        content: "";
    }
}
</style>

<!-- 外层容器用于实现小屏幕横向滚动 -->
<div class="table-container">
    <table>
        <tr>
            <th colspan="3">Supplement Facts</th>
        </tr>
        <tr>
            <th colspan="3" style="background-color: #f2f2f2;">Supplement Facts</th>
        </tr>
        <tr>
            <th colspan="3">Serving Size : 1 softgel</th>
        </tr>
        <tr>
            <th colspan="3" style="background-color: #f2f2f2;">Supplement Facts: 120 </th>
        </tr>
        <!-- 修复原代码中缺失的<tr>标签，保证表格结构合法 -->
        <tr>
            <td></td>
            <td> Amount per serving</td>
            <td>%Daily Value</td>
        </tr>
        <tr>
            <td>Calories</td>
            <td> 10</td>
            <td> 10</td>
        </tr>
        <tr>
            <td>Total Fat</td>
            <td> 10</td>
            <td> 10</td>
        </tr>
        <tr>
            <td>Cholesterol</td>
            <td> 10</td>
            <td> 10</td>
        </tr>
        <tr>
            <td>Krill Oil Concentrate</td>
            <td> 10</td>
            <td> 10</td>
        </tr>
        <tr>
            <td>Phospholipids</td>
            <td>10 </td>
            <td> 10</td>
        </tr>
        <tr>
            <td>Omega 3 Fatty Acids</td>
            <td> 10</td>
            <td> 10</td>
        </tr>
        <tr>
            <td>EPA (eicosapentaenoic acid)</td>
            <td> 10</td>
            <td> 10</td>
        </tr>
        <tr>
            <td>DHA (docosahexaenoic acid)</td>
            <td> 10</td>
            <td> 10</td>
        </tr>
        <tr>
            <td>Astaxanthin</td>
            <td> 10</td>
            <td> 10</td>
        </tr>
        <tr>
            <td>Omega 3 Fatty Acids</td>
            <td> 10</td>
            <td> 10</td>
        </tr>
    </table>
</div>

核心改动说明 #

• 滚动兜底机制：给表格添加外层容器，小屏幕下开启横向滚动，确保内容不会被截断，同时优化移动端滚动体验
• 移动端纵向布局：媒体查询中重构表格元素的显示方式，用伪元素将表头嵌入每个单元格，避免横向拥挤，提升移动端可读性
• 修复结构错误：补全原代码中缺失的<tr>标签，避免浏览器渲染异常
• 基础样式优化：调整表格默认宽度和列宽比例，适配不同容器和长文本内容
• 合并列特殊处理：针对colspan单元格调整样式，保持标题类内容的展示完整性

这个方案在不同网站环境下表现稳定，既保留了大屏幕的表格布局逻辑，又彻底解决了移动端的截断问题。

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