相同代码在Liveweave、JSFiddle、CodePen表现差异问题排查

我用Liveweave开发应用时，编辑器控制台里一切正常，但下载代码到Google Chrome运行时，发现表格超出容器范围；把相同代码放到JSFiddle和CodePen测试，结果和Chrome一致。我用GridJS构建表格，还强制表格高度为容器的100%，请问为什么相同代码在不同编辑器里表现不一样？

相关代码 #

HTML #

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <link type="text/css" rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

    <script type="module">
        import {
        Grid,
        html
    } from "https://unpkg.com/gridjs?module";
    </script>

    <link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />


    <title>HTML, CSS and JavaScript demo</title>
</head>

<body>   
            
            <div class="col-5">
                <!--<div id="fixed-alert">-->
                <div class="card h-100" id="card2">
                    <div class="card-body">

                        <table id="alert_table" class="table">
                            <tbody id="alert_body">
                                <tr>
                                    <td>
                                        <div class="ratio" style="--bs-aspect-ratio: 40%;">
                                            <div id="table"></div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        
                    </div>
                </div>
            </div>
            <script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
            </body>
            </html>

JavaScript #

new gridjs.Grid({
    columns: ["Name", "Email", "Phone Number"],
    sort: true,
    pagination: false,
    fixedHeader: true,
    resizable: true,
    width: "100%",
    height: "100%",
    //width: document.getElementById("table").clientWidth,
    data: [
        ["John", "john@example.com", "(353) 01 222 3333"],
        ["Mark", "mark@gmail.com", "(01) 22 888 4444"],
        ["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
        ["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
        ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
        ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
        ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
        ["Afshin", "afshin@mail.com", "(353) 22 87 8356"]
    ]
}).render(document.getElementById("table"));

核心原因 #

• 容器高度传递失效：Liveweave编辑器可能默认给页面或父容器添加了隐性高度约束，而Chrome、JSFiddle等环境中，你的嵌套容器结构（col-5→card h-100→card-body→table→ratio→#table）没有形成完整的高度传递链，GridJS设置的height:100%找不到有效的参考高度，导致表格内容直接撑开容器。
• Bootstrap Ratio组件的限制：ratio类通过padding-top实现宽高比，内部元素无法直接用height:100%继承这个比例高度，再加上GridJS的固定表头逻辑，进一步加剧了内容溢出问题。
• 重复引入GridJS冲突：你同时用了ES模块导入和UMD脚本两种方式引入GridJS，不同环境对重复引入的处理逻辑不同，Liveweave可能自动处理了冲突，而其他环境中导致样式或行为异常。

修复方案 #

1. 完善容器高度传递
   给ratio容器和#table添加样式，确保高度能正确传递：

<div class="ratio" style="--bs-aspect-ratio: 40%; position: relative; height: 100%;">
    <div id="table" style="height: 100%; overflow: auto;"></div>
</div>

2. 移除重复的GridJS引入
   保留一种引入方式即可，比如移除ES模块导入代码：

<!-- 移除以下模块导入代码 -->
<!-- <script type="module">
    import { Grid, html } from "https://unpkg.com/gridjs?module";
</script> -->

3. 调整GridJS配置
   如果不需要固定表头，可以暂时关闭fixedHeader: true；或者给#table设置具体像素高度，替代height:100%，确保GridJS能明确获取容器尺寸。

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