Question

我在创建粘性thead时遇到问题，我的前3列是固定的，其余数据是水平滚动的。我正在使用jquery库作为粘性标题，但是固定位置正在破坏我的水平滚动，显示页面上的所有元素。我需要粘贴标题才能保持在顶部，同时水平滚动才能工作。

它应该看起来如何，但有粘性标题。 enter image description here

.horizontal-scroll-access-point {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  thead,tbody {
    tr {
      //First three elements are fixed
      th,td {
        &:nth-child(1), &:nth-child(2), &:nth-child(3){
          background-color: white;
          position:absolute;
          text-align: center;
          width: 100px;
          padding-bottom: 10px;
          z-index: 1;
        }
        &:nth-child(1) {
          left: 0;
        }
        &:nth-child(2) {
          left: 100px;
        }
        &:nth-child(3) {
          left: 180px;
        }
        &:nth-child(4) {
          padding-left: 300px;
        }
      }
    }
  }
}

    <table class="table monthTable horizontal-scroll-access-point" ng-if="showActions()">
        <thead class="sticky-header" sticky-divs sticky-divs-margin-top="50">
            <tr>
                <th class="heading" translate>SH_Area</th>
                <th><span translate>AP_openClose</span></th>
                <th translate>AP_maxUnits</th>
                <th class="hour hover-cell" ng-repeat="hour in apu.hours" ng-click="changeUnitsAllByHourModal(hour)" on-finish-render>
                    <span ng-bind="hour | hourminute"></span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="area in apu.areaHours">
                <td ng-class="area.closed ? 'closed-cell' : 'hover-cell'" ng-click="changeUnitsAllByAccessPointModal(area)"><strong ng-bind="area.accessPointName"></strong></td>
                <td class="open-close-cell">
                  <button type="button" class="btn btn-xs" ng-class="area.closed ? 'btn-danger' : 'btn-success'" ng-click="switchAreaStatus(area)" translate>{{ area.closed ? 'AP_closed' : 'AP_opened' }}</button>
                </td>
                <td class="gradient-cell-green" ng-bind="area.maxUnits">
                </td>
                <td ng-class="area.closed ? 'closed-cell' : 'hover-cell'" style="background-color: rgba(110, 170, 120, {{ hour.units / area.maUnits }})" ng-repeat="hour in area.hours" ng-click="changeUnitsModal(area, hour)">
                    <span ng-bind="area.closed ? '0' : hour.units"></span>
                </td>
            </tr>
        </tbody>
    </table>

Answer 1

您应该只更改thead的位置，然后为每个th元素提供与该列中最宽tr元素宽度相同的宽度。

我认为你的桌子很敏感。如果是这样，请编写一些js代码来执行此操作。

如何在滚动

1 个答案: