时间戳

首页 > 解决方案 > 如何在html中左对齐表格

html - 如何在html中左对齐表格

问题描述

我有用于显示两个表格的 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

这里作为示例，我只写了一个表输出，但实际上每个表都有两个表，一个在另一个之下。

标签： htmlcss

解决方案

只需删除margin-leftand 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>

推荐阅读