You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

移动端（<400px）HTML表格内卡片宽度错乱问题求助

avatar
AI 小北
2026-7-7
移动端卡片宽度错乱问题解决

我在HTML表格的<td>元素中放置了多张卡片，屏幕宽度400px以下的移动端设备上卡片宽度显示错乱，大屏设备显示正常，希望所有移动端设备上卡片尺寸保持一致。

移动端卡片显示异常截图

原始代码

HTML代码 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cards Table</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row gx-0">
            <div class="col-md-6">
                <table style="width: 100%;">
                    <tr>
                        <td class="table-data">
                            <a href="#" class="card-rate-link" target="_blank">
                                <div class="card">
                                    <h2 class="card-title-font">Adidas Gift card</h2>
                                </div>
                            </a>
                        </td>
                        <td class="table-data">
                            <a href="#" class="card-rate-link" target="_blank">
                                <div class="card">
                                    <h2 class="card-title-font">AirBnb Gift Card</h2>
                                </div>
                            </a>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="col-md-6">
                <table style="width: 100%;">
                    <tr>
                        <td class="table-data">
                            <a href="#" class="card-rate-link" target="_blank">
                                <div class="card">
                                    <h2 class="card-title-font">Amazon Gift card</h2>
                                </div>
                            </a>
                        </td>
                        <td class="table-data">
                            <a href="#" class="card-rate-link" target="_blank">
                                <div class="card">
                                    <h2 class="card-title-font">American Express gift card</h2>
                                </div>
                            </a>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="col-md-6">
                <table style="width: 100%;">
                    <tr>
                        <td class="table-data">
                            <a href="#" class="card-rate-link" target="_blank">
                                <div class="card">
                                    <h2 class="card-title-font">Apple gift card</h2>
                                </div>
                            </a>
                        </td>
                        <td class="table-data">
                            <a href="#" class="card-rate-link" target="_blank">
                                <div class="card">
                                    <h2 class="card-title-font">Athleta</h2>
                                </div>
                            </a>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="col-md-6">
                <table style="width: 100%;">
                    <tr>
                        <td class="table-data">
                            <a href="#" class="card-rate-link" target="_blank">
                                <div class="card">
                                    <h2 class="card-title-font">Adidas</h2>
                                </div>
                            </a>
                        </td>
                        <td class="table-data">
                            <a href="#" class="card-rate-link" target="_blank">
                                <div class="card">
                                    <h2 class="card-title-font">Bed bath and beyond Gift card</h2>
                                </div>
                            </a>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="col-md-6">
                <table style="width: 100%;">
                    <tr>
                        <td class="table-data">
                            <a href="#" class="card-rate-link" target="_blank">
                                <div class="card">
                                    <h2 class="card-title-font">Best buy gift card</h2>
                                </div>
                            </a>
                        </td>
                        <td class="table-data">
                            <a href="#" class="card-rate-link" target="_blank">
                                <div class="card">
                                    <h2 class="card-title-font">Banana Republic</h2>
                                </div>
                            </a>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="col-md-6">
                <table style="width: 100%;">
                    <tr>
                        <td class="table-data">
                            <a href="#" class="card-rate-link" target="_blank">
                                <div class="card">
                                    <h2 class="card-title-font">Booking.com gift card</h2>
                                </div>
                            </a>
                        </td>
                        <td class="table-data">
                            <a href="#" class="card-rate-link" target="_blank">
                                <div class="card">
                                    <h2 class="card-title-font">Costco cash card</h2>
                                </div>
                            </a>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="col-md-6">
                <table style="width: 100%;">
                    <tr>
                        <td class="table-data">
                            <a href="#" class="card-rate-link" target="_blank">
                                <div class="card">
                                    <h2 class="card-title-font">Cvs gift card</h2>
                                </div>
                            </a>
                        </td>
                        <td class="table-data">
                            <a href="#" class="card-rate-link" target="_blank">
                                <div class="card">
                                    <h2 class="card-title-font">Dell gift card</h2>
                                </div>
                            </a>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="col-md-6">
                <table style="width: 100%;">
                    <tr>
                        <td class="table-data">
                            <a href="#" class="card-rate-link" target="_blank">
                                <div class="card">
                                    <h2 class="card-title-font">Disney gift card</h2>
                                </div>
                            </a>
                        </td>
                        <td class="table-data">
                            <a href="#" class="card-rate-link" target="_blank">
                                <div class="card">
                                    <h2 class="card-title-font">Door dash gift card</h2>
                                </div>
                            </a>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="col-md-6">
                <table style="width: 100%;">
                    <tr>
                        <td class="table-data">
                            <a href="#" class="card-rate-link" target="_blank">
                                <div class="card">
                                    <h2 class="card-title-font">Ebay Gift card</h2>
                                </div>
                            </a>
                        </td>
                        <td class="table-data">
                            <a href="#" class="card-rate-link" target="_blank">
                                <div class="card">
                                    <h2 class="card-title-font">Footlocker sports gift card</h2>
                                </div>
                            </a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

CSS代码 

.col-md-6{padding: 0;}
.card-rate-link{text-decoration: none;}
.card-title-font{
    background: linear-gradient(45deg, #fff, #fff, rgb(32, 109, 255)) !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    font-size: 1.8rem !important;
    text-align: center !important;
}
.table-data{width: 190px;max-width: 100%;}
.container{max-width: 820px;}
.card {
    width: 100%;
    max-width: 190px;
    height: 214px;
    background: #07182E;
    position: relative;
    display: flex;
    place-content: center;
    place-items: center;
    overflow: hidden;
    border-radius: 20px;
    margin: 0 auto !important;
}
.card h2 {
    z-index: 1;
    color: white;
    font-size: 2em;
}
.card::before {
    content: '';
    position: absolute;
    width: 100px;
    background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255,0,0));
    height: 130%;
    animation: rotBGimg 3s linear infinite;
    transition: all 0.2s linear;
}
@keyframes rotBGimg {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
.card::after {
    content: '';
    position: absolute;
    background: #000;
    inset: 5px;
    border-radius: 15px;
}
@media screen and (max-width:450px) {
    .card{height: 195px;padding: 5px;}
    .card-title-font{font-size: 1.6rem !important;}
}
@media screen and (max-width:350px) {
    .card-title-font{font-size: 1.5rem !important;}
}

问题原因

表格单元格默认会根据内容自动分配宽度，小屏设备下长文本会撑大单元格，导致卡片宽度不一致；同时卡片的max-width限制在小屏场景下与单元格宽度冲突，进一步加剧布局错乱。

修复方案

方案1：修复表格布局

修改CSS，强制单元格等宽，并优化卡片和文本的自适应规则：

.col-md-6{padding: 0;}
.card-rate-link{text-decoration: none;}
.card-title-font{
    background: linear-gradient(45deg, #fff, #fff, rgb(32, 109, 255)) !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    font-size: 1.8rem !important;
    text-align: center !important;
    word-wrap: break-word; /* 长文本自动换行 */
    overflow-wrap: break-word;
}
.table-data{
    width: 50%; /* 强制同一行两个单元格平分宽度 */
    max-width: 100%;
}
.container{max-width: 820px;}
.card {
    width: 100%; /* 卡片占满单元格宽度 */
    height: 214px;
    background: #07182E;
    position: relative;
    display: flex;
    place-content: center;
    place-items: center;
    overflow: hidden;
    border-radius: 20px;
    margin: 0 auto !important;
}
.card h2 {
    z-index: 1;
    color: white;
    font-size: 2em;
}
.card::before {
    content: '';
    position: absolute;
    width: 100px;
    background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255,0,0));
    height: 130%;
    animation: rotBGimg 3s linear infinite;
    transition: all 0.2s linear;
}
@keyframes rotBGimg {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
.card::after {
    content: '';
    position: absolute;
    background: #000;
    inset: 5px;
    border-radius: 15px;
}
@media screen and (max-width:450px) {
    .card{height: 195px;padding: 5px;}
    .card-title-font{font-size: 1.6rem !important;}
}
@media screen and (max-width:350px) {
    .card-title-font{font-size: 1.5rem !important;}
}

方案2：替换为Bootstrap网格（推荐）

表格不适合卡片布局，改用Bootstrap原生网格系统，自动适配不同屏幕：

<div class="container">
    <div class="row gx-2 gy-3">
        <!-- 每张卡片作为一个网格项 -->
        <div class="col-md-6 col-6">
            <a href="#" class="card-rate-link" target="_blank">
                <div class="card">
                    <h2 class="card-title-font">Adidas Gift card</h2>
                </div>
            </a>
        </div>
        <div class="col-md-6 col-6">
            <a href="#" class="card-rate-link" target="_blank">
                <div class="card">
                    <h2 class="card-title-font">AirBnb Gift Card</h2>
                </div>
            </a>
        </div>
        <!-- 其他卡片按此格式添加 -->
    </div>
</div>

此方式无需表格，利用col-6在移动端自动每行两列，卡片宽度自然一致，避免表格布局的兼容性问题。

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.07.07 01:59:51