英文:
How to arrange table and chart both are in same line using HTML
问题
如何在我的HTML代码中将图表和表格排成同一行，图表在上方，表格在下方，不太清楚如何重新排列它。以下是您提供的代码，我无法看到完整的表格。提前感谢。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=2">
<title>电池电压</title>
</head>
<body>
<div class="container-fluid">
<h1 class="mt-2 mb-3 text-center text-primary">电池电压</h1>
<div class="card">
<div class="card-header">
<div class="row">
<div class="col col-sm-9">电池电压</div>
<div class="col col-sm-3">
<input type="text" id="daterange_textbox" class="form-control" readonly />
</div>
</div>
</div>
<div class="card-body">
<div class="table-responsive" style="display: flex; justify-content: space-between;">
<div class="chart-container pie-chart" style="width: 60%;">
<div border="1" align="left">
<canvas id="bar_chart" height="90"></canvas>
</div>
</div>
<table class="table table-striped table-bordered" id="order_table" style="width: 40%; align: right;">
<thead>
<tr>
<th width="5%">订单号</th>
<th width="6%">订单价值</th>
<th width="6%">订单日期</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
上述代码中，我使用了CSS样式 display: flex; justify-content: space-between; 来让图表和表格在同一行中并排显示，图表宽度为60%，表格宽度为40%。希望这能解决您的排列问题。
英文:
how to arrange the chart table in same line in my html code chart is above and table is below which not visible clearly how to re arrange it with below code i am not able to see the full table thanks in advance
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=2">
<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="column">
<div class="card-body">
<div class="table-responsive" >
<div class="chart-container pie-chart" "width:60%" >
<div border="1"
align="left" >
<canvas id="bar_chart" height="90"> </canvas>
</div>
</div>
<table class="column">
<table class="table table-striped table-bordered" id="order_table" style="width:40%" align="right">
<thead>
<tr>
<th width="5%">Order Number</th>
<th width="6%">Order Value</th>
<th width="6%">Order Date</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
<!-- end snippet -->
答案1
得分: 1
为了将图表和表格排列在同一行，使用CSS来控制每个元素的宽度和位置，将图表的宽度设置为60%，将表格的宽度设置为40%，并将两个元素分别浮动到左侧和右侧。
<title> BATTERY VOLTAGE</title>
<style>
.chart-container {
width: 60%;
float: left;
}
.table-container {
width: 40%;
float: right;
}
</style>
</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="column">
<div class="card-body">
<div class="chart-container pie-chart">
<div border="1"
align="left" >
<canvas id="bar_chart" height="90"> </canvas>
</div>
</div>
<div class="table-container">
<table class="table table-striped table-bordered" id="order_table">
<thead>
<tr>
<th width="5%">Order Number</th>
<th width="6%">Order Value</th>
<th width="6%">Order Date</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</body>
请注意，这是一段HTML和CSS代码，用于排列图表和表格。我已经根据您的要求提供了翻译。
英文:
to arrange the chart and table in the same line use CSS to control the width, positioning of each element, set the width of the chart to 60% and the width of the table to 40%, and floated both elements to the left and right
<title> BATTERY VOLTAGE</title>
<style>
.chart-container {
width: 60%;
float: left;
}
.table-container {
width: 40%;
float: right;
}
</style>
</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="column">
<div class="card-body">
<div class="chart-container pie-chart">
<div border="1"
align="left" >
<canvas id="bar_chart" height="90"> </canvas>
</div>
</div>
<div class="table-container">
<table class="table table-striped table-bordered" id="order_table">
<thead>
<tr>
<th width="5%">Order Number</th>
<th width="6%">Order Value</th>
<th width="6%">Order Date</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</body>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论