Question

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

在这里，我仅写一个表输出，但实际上每个表有两个表，一个在另一个表的下面。

Answer 1

使用float属性。在这种情况下，您想将元素向左浮动。

      <!DOCTYPE html>
      <html>
      <head>
      <style>
      table{
      font-family:arial,sans-serif;
      border-collapse: collapse;
      width:50px;
      margin-left: auto;
      margin-right: auto;
      float:left;
      }
      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>

Answer 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中左对齐表格

2 个答案: