C#最小API+Bootstrap手机端自适应表格

代码解决方案：

下面给你一个 最小可运行、适合手机端浏览 的完整示例。
技术栈：

ASP.NET Core 6 最小 API（C# 后端，一行命令 dotnet run 即可启动）
前端只有 1 个静态文件 wwwroot/index.html，用 Bootstrap 5 做自适应表格，不需要打包、不需要 Node。
全程用 Fetch 调后端 /api/users 拿 JSON，手机端自动出现横向滚动条，字号行高都针对手机做过微调。

dotnet new web -n MobileTableDemo -o MobileTableDemo
cd MobileTableDemo

把下面 2 个文件直接覆盖进去即可运行

Program.cs（直接替换）

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddCors();   // 允许前端跨域
var app = builder.Build();

app.UseCors(p => p.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
app.UseDefaultFiles();      // 自动找 index.html
app.UseStaticFiles();       // 让 wwwroot 下的文件可被访问

// 模拟一个 API：返回 50 条用户数据
app.MapGet("/api/users", () =>
{
    var rng = new Random();
    return Enumerable.Range(1, 50).Select(i => new
    {
        Id     = i,
        Name   = $"用户{i}",
        Age    = rng.Next(18, 65),
        Phone  = $"138{rng.Next(1000, 9999):0000}{rng.Next(1000, 9999):0000}",
        City   = new[] { "北京", "上海", "广州", "深圳", "成都" }[rng.Next(0, 5)]
    });
});

app.Run();

wwwroot/index.html（新建文件，无 razor，纯静态）

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>手机端表格演示</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <style>
        /* 手机端专用小字号、紧排行高 */
        @media (max-width: 576px) {
            body   { font-size: 0.85rem; }
            .table-sm td, .table-sm th { padding: 0.35rem 0.25rem; }
        }
        /* 横向滚动容器 */
        .table-responsive { max-height: 75vh; }
    </style>
</head>
<body class="bg-light">
    <div class="container px-2 py-3">
        <h5 class="text-center mb-3">用户列表</h5>
        <div class="table-responsive">
            <table class="table table-bordered table-sm align-middle text-nowrap">
                <thead class="table-light">
                    <tr>
                        <th>ID</th><th>姓名</th><th>年龄</th><th>电话</th><th>城市</th>
                    </tr>
                </thead>
                <tbody id="tb">
                    <tr><td colspan="5" class="text-center">加载中…</td></tr>
                </tbody>
            </table>
        </div>
    </div>

<script>
(async () => {
    const tpl = data => data.map(u => `<tr>
        <td>${u.id}</td><td>${u.name}</td><td>${u.age}</td>
        <td><a href="tel:${u.phone}">${u.phone}</a></td><td>${u.city}</td>
    </tr>`).join('');
    try {
        const res = await fetch('/api/users');
        const data = await res.json();
        document.getElementById('tb').innerHTML = tpl(data);
    } catch (e) {
        document.getElementById('tb').innerHTML = '<tr><td colspan="5" class="text-danger text-center">加载失败</td></tr>';
    }
})();
</script>
</body>
</html>

运行

dotnet run

控制台会提示
Now listening on: https://localhost:5001
手机连同一局域网，浏览器访问 https://你的电脑IP:5001 即可。
（如果提示证书不安全，点“继续访问”即可，开发阶段可忽略）

真机效果

竖屏：字号自动变小，表格可左右滑动，表头固定。
横屏：直接铺满，无需滚动。
电话字段点击可直接拨号（tel: 协议）。

生产部署小贴士

把 app.UseCors(...) 换成指定域名，或前端后端同域可删掉。
用 nginx 反代、配 HTTPS、开 gzip，Bootstrap 走 CDN 即可。
数据量大时可加分页：后端 Skip/Take，前端传 page=1&size=20。

至此，一个“C# 写后端 + 手机友好表格”的最小闭环就完成了，复制即可跑。

C#最小API+Bootstrap手机端自适应表格

由 Vibe Coding 使用 AI 回答