如何在HTML中让Chart与Table同行排列并完整显示？

以下是调整后的完整代码，已实现图表与表格同行布局，且表格可完整显示：

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 引入Bootstrap CSS，确保栅格系统生效 -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

        <title> BATTERY VOLTAGE</title>
    </head>
    <body>

        <div class="container-fluid">
            <h1 class="mt-2 mb-3 text-center text-primary">BATTERY VOLTAGE</h1>
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col col-sm-9">Battery Voltage</div>
                        <div class="col col-sm-3">
                            <input type="text" id="daterange_textbox" class="form-control" readonly />
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <!-- 使用Bootstrap栅格row实现同行布局 -->
                    <div class="row g-3">
                        <!-- 图表容器占8列 -->
                        <div class="col-md-8">
                            <div class="chart-container pie-chart" style="width:100%">
                                <div style="border:1px solid #ccc;">
                                    <canvas id="bar_chart" height="200"></canvas>
                                </div>
                            </div>
                        </div>
                        <!-- 表格容器占4列 -->
                        <div class="col-md-4">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered" id="order_table">
                                    <thead>
                                        <tr>
                                            <th width="33%">Order Number</th>
                                            <th width="33%">Order Value</th>
                                            <th width="34%">Order Date</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 引入Bootstrap JS（可选，若需要交互组件） -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    </body>
</html>

关键修改说明： #

• 修复HTML结构错误：移除原代码中多余的<table class="column">无效标签，确保DOM结构合法
• 使用Bootstrap栅格布局：通过row和col-md-8/col-md-4实现图表与表格的同行排列，适配不同屏幕尺寸
• 调整容器样式：将图表容器的错误样式写法"width:60%"改为style="width:100%"，让容器自适应栅格宽度；给图表外层div添加边框替代原无效的border="1"属性
• 优化表格显示：移除表格上的align="right"，依赖栅格系统实现靠右布局；调整表头宽度比例，确保表格内容完整显示
• 完善基础配置：修正viewport的initial-scale为1（原2会导致页面缩放异常），引入Bootstrap CSS确保样式生效

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