我有用于显示两个表格的 html 代码。当我运行该程序时，这两个表显示在另一个下面，但我希望这两个表位于最左侧。
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 50px;
margin-left: auto;
margin-right: auto;
}
td,
th {
border: 1px solid #dddddd;
text-align: center;
padding: 20px;
}
#table {
margin-left: -850px;
}
</style>
<body style="background-color: #E6E6FA">
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">Reportees List</div>
<table id="employee_table" class="table table-hover" cellspacing="0">
<tr>
<th>Number</th>
<th>Name</th>
<th>UserId</th>
<th>Count</th>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="jiratable" style="display: none;">
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary" style="width: 240%;">
<div class="panel-heading">JIRA - List</div>
<table id="Jira_table" class="table table-hover" cellspacing="0">
<thead>
<tr>
<th width="80">Number</th>
<th>JiraNumber</th>
<th>JiraStatus</th>
<th>EmailId</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="sendmail" style="display: none;">
<div class="container">
<div style="text-align:right; width:100%; padding:0;">
<button id="sendMail" style='margin-right:16px' class="btn btn-
primary btn-lg pull-right">Cancel</button>
<button id="sendMail" class="btn btn-primary btn-lg pull-right" onclick="sendMail()">SendMail</button>
</div>
</div>
</body>
</html>输出是:
Number Name UserId count
1 Ram 56782 1
2 Raj 56187 2
预期输出是:
Number Name UserId count
1 Ram 56782 1
2 Raj 56187 2
这里的示例我只写了一个表输出，但实际上有两个表，一个在另一个下面。
最佳答案
只需删除 margin-left 和 margin-right。您还可以删除 width，因为表格总是自动与其内容一样宽，您对此无能为力。
body {
background-color: #E6E6FA;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
}
td,
th {
border: 1px solid #dddddd;
text-align: center;
padding: 20px;
}
#table {
margin-left: -850px;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">Reportees List</div>
<table id="employee_table" class="table table-hover" cellspacing="0">
<tr>
<th>Number</th>
<th>Name</th>
<th>UserId</th>
<th>Count</th>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="jiratable">
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary" style="width: 240%;">
<div class="panel-heading">JIRA - List</div>
<table id="Jira_table" class="table table-hover" cellspacing="0">
<thead>
<tr>
<th width="80">Number</th>
<th>JiraNumber</th>
<th>JiraStatus</th>
<th>EmailId</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="sendmail">
<div class="container">
<div style="text-align:right; width:100%; padding:0;">
<button id="sendMail" style='margin-right:16px' class="btn btn-
primary btn-lg pull-right">Cancel</button>
<button id="sendMail" class="btn btn-primary btn-lg pull-right" onclick="sendMail()">SendMail</button>
</div>
</div>关于html - 如何在 html 中左对齐表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54504430/