使用AngularJS绑定HTML表无法在Chrome中正确呈现，但在IE中无法正确呈现

时间：2018-09-12 09:22:39

标签： asp.net angularjs google-chrome internet-explorer

我已经在Web应用程序中使用了AngularJS。我已经使用Angular JS绑定了html表。在Internet Explorer中可以正常工作。问题是html表在Google Chrome中呈现时出现对齐问题。

任何人都可以指导我解决此问题吗？感谢您的帮助。 enter image description here 

<html ng-app="Demo" ng-controller="DemoController">
<link rel="stylesheet" href="../css/mainStyle.css?v=1">
<link href="../css/jquery.multiselect.css" rel="stylesheet" />
<link href="../css/jquery-ui-1.9.2.custom.css" rel="stylesheet" />

<link href="../css/jquery-ui-timepicker-addon.min.css" rel="stylesheet" />
<!--<link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" />-->
<link href="../css/bootstrap.css" rel="stylesheet" />
<link href="../JQXItems/jqwidgets/styles/jqx.base.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="../src/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../src/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="../src/jquery.blockUI.js"></script>
<script type="text/javascript" src="../src/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../src/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="../src/bootstrap.min.js"></script>
<script type="text/javascript" src="../src/bootstrap-table.min.js"></script>
<script type="text/javascript" src="../src/jquery-ui-timepicker-addon.min.js"></script>
<script type="text/javascript" src="../src/jquery-ui-sliderAccess.js"></script>

<script type="text/javascript" src="../src/jquery.multiselect.js"></script>
<script type="text/javascript" src="../src/angular.min.js"></script>


<table id="tblReport" ng-show="FormSubmitted" class="table table-bordered wrapTab_groups">

  <tbody ng-repeat="item in Items" style="margin-bottom: 17px; display: table; width: 100%; border-bottom: 1px solid #dddddd;">

    <tr id="still">

      <th style=""><b>Group </b><b> Number</b></th>
      <th style=""><b>Work </b> <b>Center</b></th>
      <th style=""><b>Order Number</b></th>
      <th style=""><b>Item Number</b></th>
      <th style=""><b>Routing SEQ</b></th>
      <th style=""><b>Scan DateTime</b></th>
      <th style=""><b>Serial Number</b></th>
      <th style=""><b>Total</b></th>

    </tr>

    <tr ng-repeat="innerItem in item.innerItems">
      <td style="background-color:white !important;" rowspan="{{item.innerItems.length}}" ng-show="(item.innerItems\[$index-1\].m_sGroupNumber!=innerItem.m_sGroupNumber&&item.innerItems\[$index-1\].m_sWorkcenter!=innerItem.m_sWorkcenter)"><span>{{innerItem.m_sGroupNumber}}</span></td>
      <td style="background-color:white !important;" rowspan="{{item.innerItems.length}}" ng-show="item.innerItems\[$index-1\].m_sWorkcenter!=innerItem.m_sWorkcenter"><span ng-bind="innerItem.m_sWorkcenter"></span></td>
      <td style="background-color:white !important;" rowspan="{{GetOrderNumberCount(item.innerItems,innerItem)}}" ng-show="(item.innerItems\[$index-1\].m_sOrderNo!=innerItem.m_sOrderNo||item.innerItems\[$index-1\].m_sWorkcenter!=innerItem.m_sWorkcenter)"><span ng-style="innerItem.isTotal==true &&{'font-weight':'bold'}" ng-bind="innerItem.m_sOrderNo"></span></td>
      <td style="background-color:white !important;"><span ng-bind="innerItem.m_sItem" ng-show="( innerItem.isTotal==false )"></span></td>
      <td style="background-color:white !important;" rowspan="{{GetRoutingSequenceCount(item.innerItems,innerItem)}}" ng-show="(item.innerItems\[$index-1\].m_sRoutingSequence!=innerItem.m_sRoutingSequence||item.innerItems\[$index-1\].m_sOrderNo!=innerItem.m_sOrderNo)"><span ng-show="!innerItem.isTotal" ng-bind="innerItem.m_sRoutingSequence"></span></td>


      <td class="remainingItems">{{innerItem.m_sScanDate}}</td>
      <td class="remainingItems">{{innerItem.m_sSerialScanned}}</td>
      <td class="remainingItems"><span ng-style="innerItem.isTotal==true &&{'font-weight':'bold'}">{{innerItem.m_sScanQty}}</span></td>
    </tr>
    <tr>
      <td colspan="7" style="font-weight: bold; font-size: 14px; border-radius: 0px;">Grand Total</td>
      <td style="font-weight: bold; font-size: 14px;">{{item.TotalCount}}</td>
    </tr>
  </tbody>
</table>

</html>

0 个答案:

没有答案
相关问题
最新问题