基于ASP.NET MVC实现表格小屏转面板视图的简化方案问询

核心方案：单HTML结构 + CSS Grid + 媒体查询 #

不用维护两套HTML，仅靠一套结构配合CSS，就能在大屏自动均分列宽、小屏转为堆叠面板，完全避免手动计算列占比的麻烦。

1. 复用性HTML结构（单套数据渲染） #

用容器包裹所有数据，每条记录包含字段标签与值，大屏下隐藏标签、模拟表格；小屏下显示标签、转为面板：

<div class="responsive-data-wrap">
    <!-- 大屏表头，小屏隐藏 -->
    <div class="data-row header">
        <div class="data-cell">用户ID</div>
        <div class="data-cell">用户名</div>
        <div class="data-cell">邮箱</div>
        <div class="data-cell">注册时间</div>
        <!-- 新增字段直接添加即可，无需调整布局 -->
    </div>

    <!-- 数据行循环渲染 -->
    @foreach(var user in Model.UserList)
    {
        <div class="data-row">
            <div class="data-cell">
                <span class="field-label">用户ID:</span>
                <span class="field-value">@user.Id</span>
            </div>
            <div class="data-cell">
                <span class="field-label">用户名:</span>
                <span class="field-value">@user.Name</span>
            </div>
            <div class="data-cell">
                <span class="field-label">邮箱:</span>
                <span class="field-value">@user.Email</span>
            </div>
            <div class="data-cell">
                <span class="field-label">注册时间:</span>
                <span class="field-value">@user.RegisterTime.ToString("yyyy-MM-dd")</span>
            </div>
        </div>
    }
</div>

2. CSS实现响应式切换逻辑 #

用CSS Grid自动均分列宽，媒体查询控制布局切换，全程无需手动计算12列占比：

/* 大屏布局（≥768px） */
.responsive-data-wrap {
    display: grid;
    /* 自动适配列数，最小列宽180px，超出自动均分 */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    margin: 15px 0;
}

.header {
    font-weight: bold;
    background-color: #f5f5f5;
}

.data-row {
    display: contents; /* 让子元素直接参与Grid布局，模拟表格行结构 */
}

.data-cell {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.field-label {
    display: none; /* 大屏隐藏字段标签 */
}

/* 小屏布局（<768px） */
@media (max-width: 767px) {
    .responsive-data-wrap {
        grid-template-columns: 1fr; /* 单列布局 */
        gap: 12px;
    }

    .header {
        display: none; /* 小屏隐藏表头 */
    }

    .data-row {
        display: block;
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 12px;
        background-color: #fff;
    }

    .data-cell {
        display: flex;
        justify-content: space-between;
        padding: 6px 0;
        border-bottom: 1px dashed #f0f0f0;
    }

    .data-cell:last-child {
        border-bottom: none;
    }

    .field-label {
        display: inline-block;
        font-weight: 600;
        color: #333;
    }
}

方案优势 #

• 单套HTML结构，完全避免数据重复渲染，符合DRY原则
• CSS Grid自动处理列宽分配，新增字段无需手动调整布局
• 媒体查询逻辑清晰，代码易维护，无需依赖额外插件
• 小屏面板样式独立，兼顾数据可读性与移动端体验

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