DIVスクロールが1つのテーブルで動作していますが、別のテーブルでは動作していません

Question

誰かがこの問題を見ることができますか？

スクロールバーには、同じCSSとHTMLファイルが存在する別のテーブルが表示されていない1つのテーブルが表示されています。トップ表スクロールバーの

が表示されていないが、下の表のためにそれは

<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> 

スクロールを示す

<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の表をスクロールを示していない

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

テーブルは同じページにありますか？表1のため

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

とCSSを：：

.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; 
} 

表2のためのCSS：

.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; 
}