如何创建一个html< table>它有一个固定的头文件**和**主要使用CSS的固定列 [英] How to create an html <table> that has a fixed header **and** pinned columns using primarily CSS

查看：75
本文介绍了如何创建一个html< table>它有一个固定的头文件**和**主要使用CSS的固定列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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



我遇到的问题是当水平滚动时，标题中的固定列出现在后面而不是顶部。浏览器决定在完成转换后哪些DOM元素应该处于顶端。我能做什么来控制这一点？ （是的，我试过z-index）

演示

.table-container {溢出：自动; height：200px; width：300px} table {table-layout：fixed; border-spacing：0;} td {padding：3px;白色空间：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 =sampleng-app =soDemong-controller =soDemoController> < p>水平滚动时，标题行会滚动到col0和col1的顶部，而不是在它后面。< / p> < p>竖直滚动时，tbody单元格渲染在Col 0和Col 1标题的顶部，而不是在它后面< / p> < div class =table-container> <表> < THEAD> < TR> < th class =pinned> Col 0< / th> < th class =pinned> Col 1< / th>第2列第2列第3栏第3栏第4栏第4栏第5栏第5行第6栏第5行第7栏第7行第8栏第8行< th> Col 9< / th> < / TR> < / THEAD> < TBODY> < tr ng-repeat =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的> < /表> < / div>< / div>

解决方案

我认为这仍然是一个z-index问题。

感谢@ sascha10000，他们让我思考失踪的事情。如果你在css中添加 position：relative 到 th.pinned 类，并且添加一个正值 z索引。 （即 z-index：20 ）它似乎工作。

（function（）{var app = angular。模块（soDemo，[]）; app.controller（soDemoController，SoDemoController）; SoDemoController。$ inject = ['$ scope'，'$ document'];函数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; ///////////实现//////// 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 {溢出：自动; height：200px; width：300px} table {table-layout：fixed; border-width：0; border-spacing：0;} td {padding：3px;白色空间：nowrap; border-right：1px solid #ccc;} th {background：＃999;} th.pinned {position：relative; / ****< ===添加了这个**** / z-index：20; / ****< ===添加了这个**** / 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 =sampleng-app =soDemong-controller =soDemoController> < p>水平滚动时，标题行会滚动到col0和col1的顶部，而不是在它后面。< / p> < p>竖直滚动时，tbody单元格渲染在Col 0和Col 1标题的顶部，而不是在它后面< / p> < div class =table-container> <表> < THEAD> < TR> < th class =pinned> Col 0< / th> < th class =pinned> Col 1< / th>第2列第2列第3栏第3栏第4栏第4栏第5栏第5行第6栏第5行第7栏第7行第8栏第8行< th> Col 9< / th> < / TR> < / THEAD> < TBODY> < tr ng-repeat =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的> < /表> < / div>< / div>

I've had really good luck applying a css transform on scroll in order to have a fixed table header. But now I would like to try the same technique when scrolling horizontally to have pinned columns.

The problem I'm running into is that the pinned columns in the header appear behind instead of on top when scrolling horizontally. The browser is deciding which DOM elements should be on top after doing the transformation. Anything I can do to control this? (yes, I've tried z-index)

Demo

(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>

解决方案

I think it is still a z-index issue.

Thanks to @sascha10000 they got me thinking about what was missing. If you add position: relative to the th.pinned class in your css and also add a positive z-index. (i.e. z-index:20) It appears to work. 

(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>

这篇关于如何创建一个html&lt; table&gt;它有一个固定的头文件**和**主要使用CSS的固定列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆