Make table header fix on scroll inside fixed height

Question

I'm repeating <tbody> in my bootstrap table which has a fixed height of 140px and have added a scroll if the data exceeds that height.

I'm finding difficulty in fixing the header with values 'Season 2018 2019 2020 2021' as I'm scrolling the table.Has anyone faced similar issue (while repeating )

angular.module('plunker', []);

angular.module('plunker').controller('MyCtrl', ['$scope', function($scope) {
    $scope.data = {
        'widget1': {
            '1': 10,
            '2': 5
        },
        'widget2': {
            '4': 7,
            '6': 6
        }
    };
    
    $scope.seasons=[{
      'season':'Winter',
      '2018':3,
      '2019':34,
      '2020':43,
      '2021':4,
    },
    {
      'season':'Autumn',
      '2018':3,
      '2019':34,
      '2020':43,
      '2021':4,
    },
    {
      'season':'Rainy',
      '2018':3,
      '2019':34,
      '2020':43,
      '2021':4,
    },
    {
      'season':'Summer',
      '2018':3,
      '2019':34,
      '2020':43,
      '2021':4,
    },
    {
      'season':'Spring',
      '2018':3,
      '2019':34,
      '2020':43,
      '2021':4,
    },
    {
      'season':'Windy',
      '2018':3,
      '2019':34,
      '2020':43,
      '2021':4,
    }]
}]);

.table-scroll-header-fix { 
    width:238px;
    overflow-y: auto;
    max-height: 140px;
}

<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
<div class="table-scroll-header-fix" ng-controller="MyCtrl">
<table class="table  table-responsive">
    <thead>
        <tr class="summary-table-header">
             <th>Season</th>
            <th>2018</th>
            <th>2019</th>
            <th>2020 </th>
            <th>2021 </th>
         </tr>
    </thead>
    <tbody ng-repeat="item in seasons">
        <tr style="cursor:pointer">
            <td>{{item.season}}</td>
            <td>{{item.2017}}</td>
            <td>{{item.2018}}</td>
            <td>{{item.2019}}</td>
            <td>{{item.2020}}</td>
        </tr>
    </tbody>
   </table>
    </div>
  </body>
</html>

@forgottonfly, generally we scroll tr inside tbody, you want to scroll tbody inside ____ ? If the answer is table, then thead and tfoot will also scroll with tbodys, if you don't want that you have to make separate tables. Is that OK? — Munim Munna, Feb 20 '18 at 04:13

Munim Munna · Accepted Answer · 2018-02-21T05:42:26.877

Tell me if this is what you are looking for. I will explain my answer.

angular.module('plunker', []);

angular.module('plunker').controller('MyCtrl', ['$scope', function($scope) {
  $scope.data = {
    'widget1': {
      '1': 10,
      '2': 5
    },
    'widget2': {
      '4': 7,
      '6': 6
    }
  };

  $scope.seasons = [{
      'season': 'Winter',
      '2018': 3,
      '2019': 34,
      '2020': 43,
      '2021': 4,
    },
    {
      'season': 'Autumn',
      '2018': 3,
      '2019': 34,
      '2020': 43,
      '2021': 4,
    },
    {
      'season': 'Rainy',
      '2018': 3,
      '2019': 34,
      '2020': 43,
      '2021': 4,
    },
    {
      'season': 'Summer',
      '2018': 3,
      '2019': 34,
      '2020': 43,
      '2021': 4,
    },
    {
      'season': 'Spring',
      '2018': 3,
      '2019': 34,
      '2020': 43,
      '2021': 4,
    },
    {
      'season': 'Windy',
      '2018': 3,
      '2019': 34,
      '2020': 43,
      '2021': 4,
    }
  ]
}]);

.table-wrapper {
  position: relative;
}

.table-scroll-header-fix {
  /*width:238px;*/
  overflow-y: auto;
  max-height: 120px;
}

.table-responsive {
  width: 100%;
}

.table-responsive.tablex>thead {
  position: absolute;
  top: 0;
  background: #ffca68;
}

.table-responsive.tablex>thead>tr>th,
.table-responsive.tablex>tbody>tr>td{
  width: 200px;
}
.table-responsive.tablex>thead>tr>th:first-child,
.table-responsive.tablex>tbody>tr>td:first-child{
  width: 320px;
}

.table-responsive th {
  text-align: left;
}

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
  <script src="app.js"></script>
</head>

<body>
  <div class="table-wrapper">
    <div class="table-scroll-header-fix" ng-controller="MyCtrl">
      <table class="table  table-responsive tablex">
        <thead>
          <tr class="summary-table-header">
            <th>Season</th>
            <th>2018</th>
            <th>2019</th>
            <th>2020 </th>
            <th>2021 </th>
          </tr>
        </thead>
        <tbody><tr><td>&nbsp;</td></tr></tbody>
        <tbody ng-repeat="item in seasons">
          <tr style="cursor:pointer">
            <td>{{item.season}}</td>
            <td>{{item.2018}}</td>
            <td>{{item.2019}}</td>
            <td>{{item.2020}}</td>
            <td>{{item.2021}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>

</html>

Why, using 2 tables solves it easily, not 2tables, just 2 table heads — Munim Munna, Feb 20 '18 at 10:44
It will be helpful if you specify what you want to use and what you don't to solve the problem. — Munim Munna, Feb 20 '18 at 14:16

score 0 · Answer 2 · answered Feb 20 '18 at 13:20

From what i understand from your question, you need fixed table header with scroll in body

we can apply and overflow property to table body instead of the container as below.

angular.module('plunker', []);

angular.module('plunker').controller('MyCtrl', ['$scope', function($scope) {
    $scope.data = {
        'widget1': {
            '1': 10,
            '2': 5
        },
        'widget2': {
            '4': 7,
            '6': 6
        }
    };
    
    $scope.seasons=[{
      'season':'Winter',
      '2018':3,
      '2019':34,
      '2020':43,
      '2021':4,
    },
    {
      'season':'Autumn',
      '2018':3,
      '2019':34,
      '2020':43,
      '2021':4,
    },
    {
      'season':'Rainy',
      '2018':3,
      '2019':34,
      '2020':43,
      '2021':4,
    },
    {
      'season':'Summer',
      '2018':3,
      '2019':34,
      '2020':43,
      '2021':4,
    },
    {
      'season':'Spring',
      '2018':3,
      '2019':34,
      '2020':43,
      '2021':4,
    },
    {
      'season':'Windy',
      '2018':3,
      '2019':34,
      '2020':43,
      '2021':4,
    }]
}]);

.table-scroll-header-fix tbody {
    display:block;
    height:100px;
    overflow:auto;
}
.table-scroll-header-fix thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}
.table-scroll-header-fix thead {
    width: calc( 100% - 1em )
}
.table-scroll-header-fix table {
    width:238px;
}

<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
<div class="table-scroll-header-fix" ng-controller="MyCtrl">
<table class="table  table-responsive table-fixed">
    <thead>
        <tr class="summary-table-header">
             <th>Season</th>
            <th>2018</th>
            <th>2019</th>
            <th>2020 </th>
            <th>2021 </th>
         </tr>
    </thead>
    <tbody >
        <tr style="cursor:pointer" ng-repeat="item in seasons">
            <td>{{item.season}}</td>
            <td>{{item.2017}}</td>
            <td>{{item.2018}}</td>
            <td>{{item.2019}}</td>
            <td>{{item.2020}}</td>
        </tr>
    </tbody>
   </table>
    </div>
  </body>
</html>

score 0 · Answer 3 · answered Feb 21 '18 at 08:28

0

I faced issues with this for quite some while. I came across a piece code for tables somewhere, I just don't recall where.
Checkout this Plunker for example.
Let me know if this doesn't work for you.

answered Feb 21 '18 at 08:28

Chirag

179
3
16

score -2 · Answer 4 · answered Jan 23 '18 at 11:51

Adding position: fixed; to <tr class="summary-table-header"> should do it. I also recommend adding a background colour so that the text doesn't overlap.

angular.module('plunker', []);

angular.module('plunker').controller('MyCtrl', ['$scope', function($scope) {
    $scope.data = {
        'widget1': {
            '1': 10,
            '2': 5
        },
        'widget2': {
            '4': 7,
            '6': 6
        }
    };
    
    $scope.seasons=[{
      'season':'Winter',
      '2018':3,
      '2019':34,
      '2020':43,
      '2021':4,
    },
    {
      'season':'Autumn',
      '2018':3,
      '2019':34,
      '2020':43,
      '2021':4,
    },
    {
      'season':'Rainy',
      '2018':3,
      '2019':34,
      '2020':43,
      '2021':4,
    },
    {
      'season':'Summer',
      '2018':3,
      '2019':34,
      '2020':43,
      '2021':4,
    },
    {
      'season':'Spring',
      '2018':3,
      '2019':34,
      '2020':43,
      '2021':4,
    },
    {
      'season':'Windy',
      '2018':3,
      '2019':34,
      '2020':43,
      '2021':4,
    }]
}]);

.table-scroll-header-fix { 
    width:238px;
    overflow-y: auto;
    max-height: 140px;
}

.summary-table-header {
position: fixed;
background-color: #fff;
}

<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
<div class="table-scroll-header-fix" ng-controller="MyCtrl">
<table class="table  table-responsive">
    <thead>
        <tr class="summary-table-header">
             <th>Season</th>
            <th>2018</th>
            <th>2019</th>
            <th>2020 </th>
            <th>2021 </th>
         </tr>
    </thead>
    <tbody ng-repeat="item in seasons">
        <tr style="cursor:pointer">
            <td>{{item.season}}</td>
            <td>{{item.2017}}</td>
            <td>{{item.2018}}</td>
            <td>{{item.2019}}</td>
            <td>{{item.2020}}</td>
        </tr>
    </tbody>
   </table>
    </div>
  </body>
</html>

@rach8garg hmm, perhaps I've misunderstood his problem. To me, it sounded like he just wants the years fixed at the top. — Sam Johnson, Jan 23 '18 at 12:04
Even in that case years are not fixed to top. There is no scrollbar in your example to justify that. — pixlboy, Jan 23 '18 at 12:14
@SamJohnson .In this I'm not able to see the main scroll bar. — forgottofly, Jan 23 '18 at 13:03

score -2 · Answer 5 · answered Jan 23 '18 at 12:11

angular.module('plunker', []);

angular.module('plunker').controller('MyCtrl', ['$scope', function($scope) {
    $scope.data = {
        'widget1': {
            '1': 10,
            '2': 5
        },
        'widget2': {
            '4': 7,
            '6': 6
        }
    };
    
    $scope.seasons=[{
      'season':'Winter',
      '2018':3,
      '2019':34,
      '2020':43,
      '2021':4,
    },
    {
      'season':'Autumn',
      '2018':3,
      '2019':34,
      '2020':43,
      '2021':4,
    },
    {
      'season':'Rainy',
      '2018':3,
      '2019':34,
      '2020':43,
      '2021':4,
    },
    {
      'season':'Summer',
      '2018':3,
      '2019':34,
      '2020':43,
      '2021':4,
    },
    {
      'season':'Spring',
      '2018':3,
      '2019':34,
      '2020':43,
      '2021':4,
    },
    {
      'season':'Windy',
      '2018':3,
      '2019':34,
      '2020':43,
      '2021':4,
    }]
}]);

.fixed_headers {
  width: 500px;
  table-layout: fixed;
  border-collapse: collapse;
}
.fixed_headers th {
  text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
  padding: 5px;
  text-align: left;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
  min-width: 100px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
  min-width: 100px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
  width: 100px;
}
.fixed_headers td:nth-child(4),
.fixed_headers th:nth-child(4) {
  width: 100px;
}
.fixed_headers td:nth-child(5),
.fixed_headers th:nth-child(5) {
  width: 100px;
}
.fixed_headers thead {
  background-color: #333;
  color: #FDFDFD;
}
.fixed_headers thead tr {
  display: block;
  position: relative;
}
.fixed_headers tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 150px;
}
.fixed_headers tbody tr:nth-child(even) {
  background-color: #DDD;
}

<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
<div class="table-scroll-header-fix" ng-controller="MyCtrl">
<table class="table table-responsive fixed_headers">
    <thead>
        <tr class="summary-table-header">
            <th>Season</th>
            <th>2018</th>
            <th>2019</th>
            <th>2020</th>
            <th>2021</th>
         </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in seasons" style="cursor:pointer">
            <td>{{item.season}}</td>
            <td>{{item.2018}}</td>
            <td>{{item.2019}}</td>
            <td>{{item.2020}}</td>
            <td>{{item.2021}}</td>
        </tr>
    </tbody>
   </table>
    </div>
  </body>
</html>

yes @rach8garg ,I'm displaying table as parent child ,on which if parent is clicked I should show child which was made possible on repeating `` — forgottofly, Jan 24 '18 at 05:30
Well well... even in that case you should be repeating `` element and then create another table or better `

` list inside each cell. Don't forget to write semantically correct code. — pixlboy, Jan 24 '18 at 07:00

Make table header fix on scroll inside fixed height

5 Answers5