DIV Scroll 适用于一张桌子但不适用于另一张桌子

Question

有人可以看看这个问题吗？

滚动条显示一个表格，而另一个表格没有显示，该表格由相同的 CSS 和 HTML 文件组成。

顶部表格滚动条不显示，但底部表格显示

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>

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

表 1 的 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;
}