内容独自移动-HTML

Question

有人可以解释一下为什么切换选项卡时两个选项卡上的内容都没有水平对齐吗？

如果您注意到，当您转到文档时，内容表将移至左侧。

我不知道为什么会这样。有帮助吗？

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="content">
  <ul class="nav nav-tabs">
    <!-- ngIf: !vm.selectedTicket.customerName1 && !vm.selectedTicket.customerName2 -->
    <!-- ngIf: vm.selectedTicket.customerName1 && vm.selectedTicket.customerName2 -->
    <li ng-if="vm.selectedTicket.customerName1 &amp;&amp; vm.selectedTicket.customerName2" class="ng-scope" style=""><a data-toggle="tab" href="#customer1Content" class="ng-binding" aria-expanded="false"><i class="glyphicon glyphicon-user"></i>&nbsp;Customer 1 Information</a></li>

    <!-- end ngIf: vm.selectedTicket.customerName1 && vm.selectedTicket.customerName2 -->
    <li class=""><a data-toggle="tab" href="#documentContent" class="ng-binding" aria-expanded="false"><i class="glyphicon glyphicon-file"></i>&nbsp;Document Information</a></li>
  </ul>
  <div class="tab-content top5">
    <!-- ngIf: !vm.selectedTicket.customerName1 && !vm.selectedTicket.customerName2 && vm.selectedTicket.customerName -->
    <!-- ngIf: vm.selectedTicket.customerName1 && vm.selectedTicket.customerName2 -->
    <div ng-if="vm.selectedTicket.customerName1 &amp;&amp; vm.selectedTicket.customerName2" id="customer1Content" class="tab-pane fade ng-scope" style="">
      <table class="table ipp-simple-table">
        <tbody>
          <tr>
            <th class="first-no-border ng-binding">Customer Number</th>
            <td class="first-no-border ng-binding">333</td>
          </tr>
          <tr>
            <th class="ng-binding">Customer Name</th>
            <td class="ng-binding">Name1</td>
          </tr>
          <tr>
            <th class="ng-binding">Birth Date</th>
            <td class="ng-binding">08.12.2017</td>
          </tr>
          <tr>
            <th class="ng-binding">Account Number</th>
            <td class="ng-binding">123</td>
          </tr>
          <tr>
            <th class="ng-binding">Status</th>
            <td>
              <!-- ngIf: vm.selectedTicket.status.description == 'New' --><span ng-if="vm.selectedTicket.status.description == 'New'" class="ipp-color ng-scope"><b class="ng-binding">New</b></span>
              <!-- end ngIf: vm.selectedTicket.status.description == 'New' -->
              <!-- ngIf: vm.selectedTicket.status.description == 'Closed' -->
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th class="ng-binding">Target Ticket
            </th>
            <td>
              <select ng-options="ticket.docid for ticket in vm.tickets" ng-model="vm.selectedTicket" class="ng-pristine ng-untouched ng-valid">
                <option label="1" value="object:49">1</option>
                <option label="2" value="object:50">2</option>
                <option label="3" value="object:51">3</option>
                <option label="4" value="object:52">4</option>
                <option label="5" value="object:53">5</option>
                <option label="6" value="object:54" selected="selected">6</option>
              </select>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
    <!-- end ngIf: vm.selectedTicket.customerName1 && vm.selectedTicket.customerName2 -->
    
    <div id="documentContent" class="tab-pane fade">
      <table class="table ipp-simple-table">
        <thead>
        </thead>
        <tbody>
          <tr>
            <th class="first-no-border ng-binding">Document ID</th>
            <td class="first-no-border ng-binding">6</td>
          </tr>
          <tr>
            <th class="ng-binding">Document Date</th>
            <td class="ng-binding">05.12.2018</td>
          </tr>
          <tr>
            <th class="ng-binding">Document Type</th>
            <td class="ng-binding">9999</td>
          </tr>
          <tr>
            <th class="ng-binding">Description</th>
            <td class="w-50 ng-binding">Unkategorisiert</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th class="ng-binding">Target Ticket</th>
            <td>
              <select ng-options="ticket.docid for ticket in vm.tickets" ng-model="vm.selectedTicket" class="ng-pristine ng-untouched ng-valid">
                <option label="1" value="object:49">1</option>
                <option label="2" value="object:50">2</option>
                <option label="3" value="object:51">3</option>
                <option label="4" value="object:52">4</option>
                <option label="5" value="object:53">5</option>
                <option label="6" value="object:54" selected="selected">6</option>
              </select>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>