后台管理系统：固定表格表头和前几列

最新推荐文章于 2022-11-28 02:51:59 发布

Saamao

最新推荐文章于 2022-11-28 02:51:59 发布

阅读量786

点赞数

分类专栏： table 文章标签： html table

本文链接：https://blog.csdn.net/Saamao/article/details/82529754

版权

table 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

 <script src="./angular.js"></script>
  <link rel="stylesheet" href="./bootstrap.min.css">
  <title></title>
  <style>
    .table {
      margin-bottom: 0;
    }

    .lefttd {
      z-index: 900;
      background: #fff;
    }

    .div {
      width: 500px;
      height: 500px;
      overflow: auto;
      position: relative;
      margin: 0 auto;
    }

    #left-div {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1000;
      background: gray;
    }
    #right-div {
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>

<body ng-controller="bodyCtrl">

  <div class="div" id="div">
    <div id="left-div">
      <table class="table table-bordered">
        <tr>
          <td>
            <div style="width:100px">xxx</div>
          </td>
          <td>
            <div style="width:150px">yyy</div>
          </td>
        </tr>
      </table>
    </div>
    <div id="right-div">
      <table style="position:relative;" class="table table-bordered">
        <thead id="thead" style="z-index: 100;background:red;">
          <tr>
            <td>
              <div style="width:100px">xxx</div>
            </td>
            <td>
              <div style="width:150px;">yyy</div>
            </td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="m in list" class="set-height">
            <td class="lefttd">
              {{m.name}}
            </td>
            <td class="lefttd">
              <div style="word-break:break-all;">
                {{m.age}}
              </div>
            </td>
            <td>{{m.sex}}</td>
            <td>{{m.girl}}</td>
            <td>{{m.eat}}</td>
            <td>{{m.write}}</td>
            <td>{{m.book}}</td>
            <td>{{m.class}}</td>
            <td>{{m.score}}</td>
          </tr>
        </tbody>

      </table>
    </div>
  </div>

  <script>
    var app = angular.module('myApp', ['ng'])
    // app.directive('repeatFinish', ['$timeout', function ($timeout) {
    //   return {
    //     link: function (scope, element, attr) {
    //       if (scope.$last == true) {
    //         $timeout(function () {
    //           scope.$eval(attr.repeatFinish);
    //         });
    //       }
    //     }
    //   }
    // }])
    app.controller('bodyCtrl', ['$scope', function ($scope) {
      $scope.list = []
      $scope.list = [
        {
          name: 'tom',
          age: '18485454545454545465465646',
          sex: 'man',
          score: 75,
          class: '3-4',
          girl: 'mary',
          book: 'hong',
          write: 'pencil',
          eat: 'meat'
        },
        {
          name: 'tom',
          age: '18485454545454545465465646',
          sex: 'man',
          score: 75,
          class: '3-4',
          girl: 'mary',
          book: 'hong',
          write: 'pencil',
          eat: 'meat'
        },
        {
          name: 'tom',
          age: '18485454545454545465465646',
          sex: 'man',
          score: 75,
          class: '3-4',
          girl: 'mary',
          book: 'hong',
          write: 'pencil',
          eat: 'meat'
        },
        {
          name: 'tom',
          age: '18485454545454545465465646',
          sex: 'man',
          score: 75,
          class: '3-4',
          girl: 'mary',
          book: 'hong',
          write: 'pencil',
          eat: 'meat'
        },
        {
          name: 'tom',
          age: '18485454545454545465465646',
          sex: 'man',
          score: 75,
          class: '3-4',
          girl: 'mary',
          book: 'hong',
          write: 'pencil',
          eat: 'meat'
        },
        {
          name: 'tom',
          age: '18485454545454545465ffgsddffffffffffffffffffffffffffffffffff465646',
          sex: 'man',
          score: 75,
          class: '3-4',
          girl: 'mary',
          book: 'hong',
          write: 'pencil',
          eat: 'meat'
        },
        {
          name: 'tom',
          age: 18,
          sex: 'man',
          score: 75,
          class: '3-4',
          girl: 'mary',
          book: 'hong',
          write: 'pencil',
          eat: 'meat'
        },
        {
          name: 'tom',
          age: 18,
          sex: 'man',
          score: 75,
          class: '3-4',
          girl: 'mary',
          book: 'hong',
          write: 'pencil',
          eat: 'meat'
        },
        {
          name: 'tom',
          age: 18,
          sex: 'man',
          score: 75,
          class: '3-4',
          girl: 'mary',
          book: 'hong',
          write: 'pencil',
          eat: 'meat'
        },
        {
          name: 'tom',
          age: 18,
          sex: 'man',
          score: 75,
          class: '3-4',
          girl: 'mary',
          book: 'hong',
          write: 'pencil',
          eat: 'meat'
        },
        {
          name: 'tom',
          age: 18,
          sex: 'man',
          score: 75,
          class: '3-4',
          girl: 'mary',
          book: 'hong',
          write: 'pencil',
          eat: 'meat'
        },
        {
          name: 'tom',
          age: 18,
          sex: 'man',
          score: 75,
          class: '3-4',
          girl: 'mary',
          book: 'hong',
          write: 'pencil',
          eat: 'meat'
        },
        {
          name: 'tom',
          age: 18,
          sex: 'man',
          score: 75,
          class: '3-4',
          girl: 'mary',
          book: 'hong',
          write: 'pencil',
          eat: 'meat'
        },
        {
          name: 'tom',
          age: 18,
          sex: 'man',
          score: 75,
          class: '3-4',
          girl: 'mary',
          book: 'hong',
          write: 'pencil',
          eat: 'meat'
        },
        {
          name: 'tom',
          age: 18,
          sex: 'man',
          score: 75,
          class: '3-4',
          girl: 'mary',
          book: 'hong',
          write: 'pencil',
          eat: 'meat'
        },
        {
          name: 'tom',
          age: 18,
          sex: 'man',
          score: 75,
          class: '3-4',
          girl: 'mary',
          book: 'hong',
          write: 'pencil',
          eat: 'meat'
        },
        {
          name: 'tom',
          age: 18,
          sex: 'man',
          score: 75,
          class: '3-4',
          girl: 'mary',
          book: 'hong',
          write: 'pencil',
          eat: 'meat'
        }
      ]
      let thead = document.getElementById('thead')
      let lefttds = document.getElementsByClassName('lefttd')
      let leftdiv = document.getElementById('left-div')
      div.addEventListener('scroll', function (e) {
        let scrollTop = this.scrollTop
        let scrollLeft = this.scrollLeft
        thead.style.transform = 'translateY(' + scrollTop + 'px)'
        leftdiv.style.top = scrollTop + 'px'
        leftdiv.style.left = scrollLeft + 'px'
        for (let i = 0, len = lefttds.length; i < len; i++) {
          lefttds[i].style.transform = 'translateX(' + scrollLeft + 'px)'
        }
      })
    }])
  </script>
</body>

</html>

Saamao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
后台管理系统：固定表格表头和前几列

&lt;script src="./angular.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="./bootstrap.min.css"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .table { mar
复制链接

扫一扫

专栏目录