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

DIV滚动为一个表工作，但不为另一个表工作

2 个答案: