DIV滾動工作的一張桌子，但不能爲另一張桌子工作

Question

有人可以看這個問題嗎？

滾動條顯示的是一張表，因爲它沒有顯示另一張由相同的CSS和HTML文件組成的表。

頂級表滾動條沒有顯示，但對於底部的表它的顯示不顯示滾動

<div class="wrapper"> 
    <table class="professional"> 
     <tbody> 
     <tr> 
      <th class="tableheader" ng-show="accountInfo.accountId > 0">Account Number</th> 
      <th class="tableheader" ng-show="accountInfo.accountId > 0" >First Name</th> 
      <th class="tableheader" ng-show="accountInfo.accountId > 0">Last Name</th> 
      <th class="tableheader" ng-show="accountInfo.accountId > 0">Status</th> 
      <th class="tableheader" ng-show="accountInfo.accountId > 0">Services</th> 
      <th class="tableheader" ng-show="accountInfo.accountId > 0">Suspend Status</th> 
      <th class="tableheader" ng-show="accountInfo.accountId > 0">Phone Number</th> 
      <th class="tableheader" ng-show="accountInfo.accountId > 0">Activation Code</th> 
      <th class="tableheader" ng-show="accountInfo.accountId > 0">SSO ID</th> 
     </tr> 
     <tr> 
      <td class="features" >{{accountInfo.accountId}}</td> 
      <td class="features" >{{accountInfo.firstName}}</td> 
      <td class="features" >{{accountInfo.lastName}}</td> 
      <td class="features" >{{accountInfo.status}}</td> 
      <td class="features" >{{accountInfo.group}}</td> 
      <td class="features" >{{accountInfo.suspended}}</td> 
      <td class="features" >{{accountInfo.homePhone}}</td> 
      <td class="features" >{{accountInfo.activationCode}}</td> 
      <td class="features" >{{accountInfo.guid}}</td> 
     </tr> 
     </tbody> 
    </table> 
</div> 

HTML表顯示滾動

<div class="wrapper"> 
    <table class="professional"> 
     <tbody> 
     <tr> 
      <th class="tableheader" ng-repeat="list in cellularIPAddressValue">{{list.deviceType}} 
      </th> 
     </tr> 
     <tr> 
      <td class="features" ng-repeat="list in cellularIPAddressValue">{{list.instanceId}} 
      </td> 
     </tr> 
     <tr> 
      <td class="features" ng-repeat="list in cellularIPAddressValue">{{list.firmwareVersion}} 
      </td> 
     </tr> 
     <tr> 
      <td class="features" ng-repeat="list in cellularIPAddressValue">{{list.manufacturer}} 
      </td> 
     </tr> 
     <tr> 
      <td class="features" ng-repeat="list in cellularIPAddressValue">{{list.model}} 
      </td> 
     </tr> 
     <tr> 
      <td class="features" ng-repeat="list in cellularIPAddressValue"> 
      {{list.troubles[0].description}} 
      <p ng-show="list.troubles[0]">Failure On {{list.troubles[0].date}} 
      </p> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
</div> 

HTML表

CSS：

.wrapper { 
    overflow: scroll; 
    width: 1350px; 
    white-space: nowrap; 
    padding-bottom: 10px; 
    padding-top: 10px; 
} 

.professional .title { 
    padding-top: 10px; 
    background: #2980b9; 
} 

.professional .tableheader, .professional .pt-footer { 
    background: #2980b9; 
} 

.professional .tableheader:after { 
    border-top-color: #2980b9; 
} 

.professional .pt-footer:after { 
    border-top-color: #FFFFFF; 
} 

Answer 1

我已經得到了解決針對上述問題。

通過修改CSS如下

糾正，以便我已經加入white-space : nowrap因此內容現在看起來不錯，與同一個數據的滾動條不縮水

.wrapper { 
     overflow : auto; 
     width: 1350px; 
     white-space: nowrap; 
     padding-bottom : 10px; 
     padding-top : 10px; 
    } 

    .th { 
     text-align: center; 
     -webkit-border-radius: 10px; 
     -moz-border-radius: 10px; 
     border-radius: 10px; 
     width : auto; 
     height : word-spacing; 
    white-space: nowrap; 

    } 

    .td { 
     white-space: nowrap; 
     border-style: solid; 
     border-right-color: #ff0000; 
    } 

Answer 2

這些表是在同一頁上嗎？如果是的話，表類更改爲別的東西：

<table class="professional"> for table 1 
<table class="professional2"> for table 2 

和CSS表1：

.professional .title { 
    padding-top: 10px; 
    background: #2980b9; 
} 

.professional .tableheader, .professional .pt-footer { 
    background: #2980b9; 
} 

.professional .tableheader:after { 
    border-top-color: #2980b9; 
} 

.professional .pt-footer:after { 
    border-top-color: #FFFFFF; 
} 

CSS爲表2：

.professional2 .title { 
    padding-top: 10px; 
    background: #2980b9; 
} 

.professional2 .tableheader, .professional .pt-footer { 
    background: #2980b9; 
} 

.professional2 .tableheader:after { 
    border-top-color: #2980b9; 
} 

.professional2 .pt-footer:after { 
    border-top-color: #FFFFFF; 
}