DIV 滚动适用于一个 table 但不适用于另一个 table

Question

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

一个 table 的滚动条显示，而另一个 table 的滚动条不显示，它由相同的 CSS 和现有的 HTML 文件组成。

顶部 Table 滚动条不显示，但底部 table 滚动条显示

HTML table 不显示滚动条

<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 Table 显示 Scroll

<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

table 是否在同一页上？如果是，请将 table class 更改为其他内容：

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

和 CSS 对于 table 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 对于 table 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;
}

Answer 2

我已经找到了上述问题的解决方案。

通过如下修改 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;
    }

DIV 滚动适用于一个 table 但不适用于另一个 table

DIV Scroll working for one table but not working for another table

html

css

scroll

html-table

overflow