ASP.NET WebForm GridView如何实现移动端响应式列堆叠适配

现有代码的核心问题 #

• 给GridView硬编码了Height="296px"、Width="886px"固定像素属性，完全锁死了容器尺寸，任何响应式规则都无法生效。
• 错误将Bootstrap的table-responsive-xl类直接加在表格元素上：该类是用于包裹表格的外层容器的，且xl阈值代表仅在宽度大于1200px的屏幕下触发响应式规则，完全不符合移动端适配需求。
• 仅靠Bootstrap默认的表格类只能实现横向滚动，无法实现预期的列堆叠布局，需要自定义媒体查询规则。

调整步骤 #

1. 修正基础控件代码 #

移除硬编码宽高，把响应式类移到外层容器上，调整后的代码如下：

<section id="no-more-gridView" class="table-responsive p-0">
    <asp:GridView 
        ID="GridView1" 
        CssClass="table table-bordered table-hover w-100 mb-0" 
        runat="server" 
        AutoGenerateColumns="False" 
        DataSourceID="SqlDataSource1" 
        AllowSorting="True" 
        BorderStyle="Groove" 
        HorizontalAlign="Center" 
        OnSelectedIndexChanged="GridView1_SelectedIndexChanged"
        OnRowDataBound="GridView1_RowDataBound">
        <AlternatingRowStyle BackColor="#CCFFFF" />
        <Columns>
            <asp:BoundField DataField="Row#" HeaderText="Row#" SortExpression="Row#" />
            <asp:BoundField DataField="Number" HeaderText="Number" SortExpression="Number" />
            <asp:BoundField DataField="Person" HeaderText="Person" SortExpression="Person" />
            <asp:BoundField DataField="Reason" HeaderText="Reason" SortExpression="Reason" />
            <asp:BoundField DataField="Status" HeaderText="Status" SortExpression="Status" />
            <asp:BoundField DataField="Type" HeaderText="Type" SortExpression="Type" />
            <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
        </Columns>
        <HeaderStyle HorizontalAlign="Center" CssClass="table-primary"/>
    </asp:GridView>
</section>

2. 添加列堆叠所需的自定义CSS #

在页面样式块中加入以下规则，实现768px以下宽度（移动端）的列堆叠效果：

@media screen and (max-width: 767px) {
    /* 隐藏桌面端的整行表头 */
    #no-more-gridView table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    /* 每一行数据渲染为独立的卡片块 */
    #no-more-gridView table tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
    }
    /* 每个单元格渲染为独立行 */
    #no-more-gridView table td {
        display: block;
        text-align: right;
    }
    /* 在每个单元格左侧显示对应字段名 */
    #no-more-gridView table td::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-align: left;
    }
}

3. 绑定单元格的字段名映射 #

通过GridView的RowDataBound事件，把每一列的表头文本赋值给对应单元格的data-label属性，让上述CSS能正确识别显示的字段名：

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    // 仅对数据行执行逻辑
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        for (int i = 0; i < e.Row.Cells.Count; i++)
        {
            e.Row.Cells[i].Attributes["data-label"] = GridView1.HeaderRow.Cells[i].Text;
        }
    }
}

配置调整说明 #

• 外层容器的table-responsive类可以保证桌面端如果列数量过多出现溢出时，自动生成横向滚动条，不会撑破页面布局。
• 媒体查询的767px阈值可根据实际需求调整，若需要适配更大的平板设备，可将阈值改为991px。
• 所有尺寸全部采用相对单位，没有硬编码的固定像素，可自动适配不同宽度的移动设备。

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