如何在html中右对齐按钮

时间：2019-01-31 05:31:38

标签： html

其实我想从js的内容附加到HTML table.And也用它，我想下面的表格中添加一个按钮page.But极右我不能对齐it.Please指南我要去哪里错了。

HTML代码是：

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 20px;
}

#table {
  margin-left: -900px;
}
<!DOCTYPE html>
<html>

<head>

  <body>
    <div id="table" style="display:none">
      <div class="container text-center">
        <div class="row">
          <div class="col-sm-4"></div>
          <!--If I remove this line the table only will not be displayed-->

          <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" width="100%">
                <tr>
                  <th>Number</th>
                  <th>Name</th>
                  <th>UserId</th>
                  <th>Count</th>
                </tr>

              </table>
            </div>
          </div>
          <div id="jiratable" style="display:none">
            <div class="container text-center">
              <div class="row">
                <div class="col-sm-4"></div>
                <div class="col-sm-4">
                  <div class="panel panel-primary" style="width: 240%;">
                    <div class="panel-heading">JIRA - List</div>
                    <table class="table table-hover">
                      <table id="Jira_table" class="table table-hover" cellspacing="0" style="width:240%;table-layout:fixed">
                        <thead>
                          <tr>
                            <th width="80">Number</th>
                            <th>JiraNumber</th>
                            <th>JiraStatus</th>
                            <th>EmailId</th>

                          </tr>
                        </thead>
                      </table>
                  </div>
                </div>
              </div>
            </div>
            <div class="container">
              <div style="text-align:right; width:100%; padding:0;">
                <button id="sendMail" class="btn btn-primary btn-lg pull-right" onclick="sendMail()">SendMail</button>

              </div>
            </div>
  </body>

</html>

我不知道我要去哪里错了。

预期输出为：

Number  id   name  count       Number    JiraNumber   Jirastatus    EmailId
1       AG   RAJ     0             1       TR-150     RS-Release    **@gmail
2       TG   Ram     3             1       TR-152     RS1-Release   **@gmail
                                   1       TR-153     RS2-Release   **@gmail

                                                         SendMail  Cancel

因此，我希望的Sendmail和取消按钮right.But输出是：

Number  id   name  count      Number   JiraNumber  Jirastatus     EmailId
1     AG   RAJ     0             1       TR-150    RS-Release     **@gmail
2     TG   Ram     3             1       TR-152    RS1-Release    **@gmail
                                 1       TR-153    RS2-Release    **@gmail

                                        SendMail  Cancel

2 个答案:

答案 0 :(得分：1)

这是您的问题列表。

  1. 您缺少很多结束标签
  2. 您的表格不会显示，因为您有style="display:none"，这表示该表格不会显示。 display
    3. 的信息
  3. 在代码中，您有很多缺少对齐的内容，这使表格很奇怪。
  4. class="btn btn-primary btn-lg pull-right"此类已经正确对齐
  5. 要并排对齐表，为数据表创建父表或**在CSS内，您可以设置分区位置**（，这意味着需要做更多工作/更多代码，您需要具备）

我建议您使用此代码。 

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 50px;
  /*edit this as you want*/
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 20px;
}


/* to clear the border */

.noborder {
  border: none;
}
<!DOCTYPE html>
<html>

<body>
  <table>
    <td>
      <div id="table" style="display:block">
        <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" width="100%">
                  <tr>
                    <th>Number</th>
                    <th>Name</th>
                    <th>UserId</th>
                    <th>Count</th>
                  </tr>

                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </td>
    <td>
      <div id="jiratable" style="display:block">
        <div class="container text-center">
          <div class="row">
            <div class="col-sm-4">
              <div class="panel panel-primary">
                <div class="panel-heading">JIRA - List</div>
                <table id="Jira_table" class="table table-hover" cellspacing="0">

                  <tr>
                    <th>Number</th>
                    <th>JiraNumber</th>
                    <th>JiraStatus</th>
                    <th>EmailId</th>

                  </tr>

                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </td>
    <tr>
      <td class="noborder"></td>
      <td class="noborder">
        <div class="container">
          <div style="text-align:right; width:100%; padding:0;">
            <button id="sendMail" onclick="sendMail()">SendMail</button>
          </div>
        </div>
      </td>
  </table>
</body>

</html>

摘要

您需要更改的重要事项是标签的关闭。这可能会影响您的输出。

参考： About closing tag

答案 1 :(得分：0)

    *You are not properly closed end div tags properly 
    *remove style hidden
    *merge two tables and remove a border









    table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
      border: none !important;
    }

    td,
    th {
      text-align: left;
      padding: 20px;
    }


    <!DOCTYPE html>
    <html>

    <body>
      <div id="table" style="display:block">
        <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" width="100%" cellspacing="0">
                  <tr>
                    <th>Number</th>
                    <th>Name</th>
                    <th>UserId</th>
                    <th>Count</th>
                    <th>Number</th>
                    <th>JiraNumber</th>
                    <th>JiraStatus</th>
                    <th>EmailId</th>
                  </tr>
                  <tr>
                    <td>1</td>
                    <td> Ag</td>
                    <td>1</td>
                    <td>Raj </td>
                    <td>0</td>
                    <td>1 </td>
                    <td>TR0-150</td>
                    <td>GMAIL </td>

                  </tr>

                </table>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="container">
        <div style="text-align:right; width:100%; padding:0;">
          <button id="sendMail" class="btn btn-primary btn-lg pull-right" style="color: white;  background-color: blue;padding:5px" onclick="sendMail()">SendMail</button>

        </div>
      </div>
    </body>

    </html>
相关问题
最新问题