javascript - 表格标题未与 ajax 调用的表格行对齐

Question

结果我使用了 ajax 调用来检索行的数据。我的结果没有显示表格的正确格式。这些行出现在标题的第一列中。我在正文中添加了表头，所以我不确定是否是因为这个。

请帮助我使标题和行对齐。提前致谢。

这是我的一段代码：

$(document).ready(function() {

  $.ajax({
    url: "/otcs/livelink.exe/open/WebReport1",
    dataType: 'html',
    async: true,
    success: function(result) {
      var $response = $(result);
      // console.log(result)
      var a = $(result).find("tr.GO").clone();
      $("#div1").html(a);
    }
  });
});

function Display1() {
  $("#TableHeading1").toggle();
  $("#div1").toggle();
}

table.Table {
  align: center;
  margin-right: 50px;
  font-family: calibri;
  border-collapse: collapse;
  width: 100%;
}

#TableHeading1>th {
  background-color: lightgrey;
  font-family: times new roman;
  font-size: 18px;
  border-style: double;
}

.GO>td {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="hide" style="display:none"></div>

<button type="button" style="font-family:calibri;font-size:25px;background-color:Teal;color:white;width:150px;height:50px;cursor:pointer;" onclick="Display1();">GO</button>

<div>
  <table class="Table">
    <tr id="TableHeading1" style="display:none">
      <th>Employee ID</th>
      <th>Name</th>
      <th>Mail address</th>
      <th>Phone Number</th>
      <th>Designation</th>
    </tr>
    <tr id="div1" style="display:none"></tr>
  </table>
</div>

标签： javascripthtmljquery