如何使用主要CSS创建一个具有固定标题**和**固定列的html

时间：2017-07-25 23:23:09

标签： javascript html css angularjs

我非常幸运在滚动上应用css转换以获得固定的表头。但是现在我想在水平滚动以固定列时尝试相同的技术。

我遇到的问题是，当水平滚动时，标题中的固定列会显示在后面而不是顶部。浏览器在进行转换后决定哪些DOM元素应该在顶部。我能做些什么来控制这个？ （是的，我尝试过z-index）

演示 

(function() {
  var app = angular.module("soDemo", []);
  app.controller("soDemoController", SoDemoController);

  SoDemoController.$inject = ['$scope', '$document'];

  function SoDemoController($scope, $document) {
    var vm = {
      data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    };

    $scope.vm = vm;
    $('.table-container').on('scroll', onScroll);

    return;

    /////////// IMPLEMENATION ////////
    function onScroll() {
      var translate = "translate(0," + this.scrollTop + "px)";
      $("table thead th:not(.pinned)").css('transform', translate);

      translate = "translate(" + this.scrollLeft + "px,0)";
      $("table tbody .pinned").css('transform', translate);

      translate = "translate(" + this.scrollLeft + "px," + this.scrollTop + "px)";
      $("table thead th.pinned").css('transform', translate);
    }
  }
})();
.table-container {
  overflow: auto;
  height: 200px;
  width: 300px
}

table {
  table-layout: fixed;
  border-spacing: 0;
}

td {
  padding: 3px;
  white-space: nowrap;
  border-right: 1px solid #ccc;
}

th {
  background: #999;
}

th.pinned {
  background: #ccc;
}

td.pinned {
  background: #eee;
}

input {
  margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>

<div class="sample" ng-app="soDemo" ng-controller="soDemoController">
  <p>When you scroll horizontally, the header row scrolls on top of col0 and col1 instead of behind it.</p>
  <p>When you scroll vertically, the tbody cells render over top of Col 0 and Col 1 headers instead of behind it</p>
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th class="pinned">Col 0</th>
          <th class="pinned">Col 1</th>
          <th>Col 2</th>
          <th>Col 3</th>
          <th>Col 4</th>
          <th>Col 5</th>
          <th>Col 6</th>
          <th>Col 7</th>
          <th>Col 8</th>
          <th>Col 9</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in vm.data">
          <td class="pinned">Data {{item}}</td>
          <td class="pinned">Data {{item}}</td>
          <td>Data {{item}}</td>
          <td>Data {{item}}</td>
          <td>Data {{item}}</td>
          <td>Data {{item}}</td>
          <td>Data {{item}}</td>
          <td>Data {{item}}</td>
          <td>Data {{item}}</td>
          <td>Data {{item}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

3 个答案:

答案 0 :(得分：3)

我认为它仍然是一个z指数问题。

感谢@ sascha10000，他们让我想到了缺少的东西。如果您将th.pinned添加到css中的z-index班级，并添加肯定z-index:20。 （即(function() { var app = angular.module("soDemo", []); app.controller("soDemoController", SoDemoController); SoDemoController.$inject = ['$scope', '$document']; function SoDemoController($scope, $document) { var vm = { data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] }; $scope.vm = vm; $('.table-container').on('scroll', onScroll); return; /////////// IMPLEMENATION //////// function onScroll() { var translate = "translate(0," + this.scrollTop + "px)"; $("table thead th:not(.pinned)").css('transform', translate); translate = "translate(" + this.scrollLeft + "px,0)"; $("table tbody .pinned").css('transform', translate); translate = "translate(" + this.scrollLeft + "px," + this.scrollTop + "px)"; $("table thead th.pinned").css('transform', translate); } } })();）似乎有效。 

.table-container {
  overflow: auto;
  height: 200px;
  width: 300px
}

table {
  table-layout: fixed;
  border-width: 0;
  border-spacing: 0;
}

td {
  padding: 3px;
  white-space: nowrap;
  border-right: 1px solid #ccc;
}

th {
  background: #999;
}

th.pinned {
  position: relative; /**** <===  added this ****/
  z-index: 20;        /**** <===  added this ****/
  background: #ccc;
}

td.pinned {
  background: #eee;
}

input {
  margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>

<div class="sample" ng-app="soDemo" ng-controller="soDemoController">
  <p>When you scroll horizontally, the header row scrolls on top of col0 and col1 instead of behind it.</p>
  <p>When you scroll vertically, the tbody cells render over top of Col 0 and Col 1 headers instead of behind it</p>
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th class="pinned">Col 0</th>
          <th class="pinned">Col 1</th>
          <th>Col 2</th>
          <th>Col 3</th>
          <th>Col 4</th>
          <th>Col 5</th>
          <th>Col 6</th>
          <th>Col 7</th>
          <th>Col 8</th>
          <th>Col 9</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in vm.data">
          <td class="pinned">Data {{item}}</td>
          <td class="pinned">Data {{item}}</td>
          <td>Data {{item}}</td>
          <td>Data {{item}}</td>
          <td>Data {{item}}</td>
          <td>Data {{item}}</td>
          <td>Data {{item}}</td>
          <td>Data {{item}}</td>
          <td>Data {{item}}</td>
          <td>Data {{item}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
while True:
   a = numpy.fromfile(f, recordType, N)
   # proccess data 
   if a.size < N:
        break

答案 1 :(得分：0)

这就是table的工作方式，您可以模仿table来实现此功能，但据我所知，您不能使用table，因为table s倾向于忽略z-index值。

答案 2 :(得分：0)

你签出了position: sticky吗？我确信这正是你正在寻找的。您需要在行/列上设置z-index以使其保持在其余部分之上。

position: sticky on MDN

相关问题
最新问题