如何在C# Web Forms中实现两个GridView并排显示

方案1：使用Bootstrap网格布局（推荐） #

首先确保你的页面已引入Bootstrap CSS资源，直接用Bootstrap的栅格系统控制两个GridView的并排布局，同时可以给GridView绑定Bootstrap内置的表格样式优化显示效果，代码示例如下：

<div class="container-fluid mt-3">
    <div class="row g-3">
        <!-- 第一个GridView占一半宽度 -->
        <div class="col-md-6">
            <asp:GridView ID="GridView1" runat="server" CssClass="table table-bordered table-striped" Width="100%">
            </asp:GridView>
        </div>
        <!-- 第二个GridView占另一半宽度 -->
        <div class="col-md-6">
            <asp:GridView ID="GridView2" runat="server" CssClass="table table-bordered table-striped" Width="100%">
            </asp:GridView>
        </div>
    </div>
</div>

说明：

• col-md-6 表示在中等及以上尺寸的屏幕下各占50%宽度，小屏幕会自动堆叠成上下布局，适配移动端
• 给GridView设置Width="100%"可以让表格自动撑满所在的列容器，不会因为内容过短导致排版错位
• 可选的table系列类可以快速美化表格样式，不需要可以删除

方案2：原生CSS实现（无需引入Bootstrap） #

如果不想依赖Bootstrap，直接用Flex布局实现即可，代码如下：
首先在页面头部加自定义样式：

<style>
    .grid-container {
        display: flex;
        gap: 16px; /* 两个表格之间的间距 */
        width: 100%;
    }
    .grid-item {
        flex: 1; /* 两个表格平分宽度 */
    }
    .grid-item table {
        width: 100%;
        border-collapse: collapse;
    }
</style>

然后ASPX部分代码：

<div class="grid-container">
    <div class="grid-item">
        <asp:GridView ID="GridView1" runat="server">
        </asp:GridView>
    </div>
    <div class="grid-item">
        <asp:GridView ID="GridView2" runat="server">
        </asp:GridView>
    </div>
</div>

原有代码失效修复方案 #

你之前用table布局没生效大概率是因为没有给外层table、td以及GridView本身设置宽度规则，GridView内容过多时会自动撑开td导致换行，加上宽度限制即可修复原有方案，示例如下：

<table style="width:100%;border-spacing:16px;">
    <tr>
        <td style="width:50%;vertical-align:top;">
            <asp:GridView ID="GridView1" runat="server" Width="100%">
            </asp:GridView>
        </td>
        <td style="width:50%;vertical-align:top;">
            <asp:GridView ID="GridView2" runat="server" Width="100%">
            </asp:GridView>
        </td>
    </tr>
</table>

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