Сделать заголовок таблицы фиксированным на свитке внутри фиксированной высоты

Question

Сделать заголовок таблицы фиксированным на свитке внутри фиксированной высоты

Я повторяю <tbody> в моей таблице начальной загрузки, которая имеет фиксированную высоту 140px и добавили прокрутку, если данные превышают эту высоту.

Я испытываю трудности с исправлением заголовка со значениями "Сезон 2018, 2019, 2020, 2021" при прокрутке таблицы. Кто-нибудь сталкивался с подобной проблемой (при повторении)

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>

-1

html css angularjs twitter-bootstrap angularjs-ng-repeat

Источник

user4060595 23 янв '18 в 11:44

5 ответов

Решение

Я столкнулся с проблемами в течение довольно долгого времени. Я где-то наткнулся на кусок кода для таблиц, я просто не помню где.
Оформить заказ на этот Plunker например.
Дайте мне знать, если это не сработает для вас.

0

Источник

user3395365 21 фев '18 в 08:28

Из того, что я понимаю из вашего вопроса, вам нужен фиксированный заголовок таблицы с прокруткой в теле

мы можем применить и переполнить свойство к телу таблицы вместо контейнера, как показано ниже.

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>

0

Источник

user4815005 20 фев '18 в 13:20

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>

-2

Источник

user2028631 23 янв '18 в 12:11

Добавление position: fixed; в <tr class="summary-table-header"> должен сделать это. Я также рекомендую добавить цвет фона, чтобы текст не перекрывался.

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>

-2

Источник

user8836991 23 янв '18 в 11:51

Другие вопросы по тегам html css angularjs twitter-bootstrap angularjs-ng-repeat

user9276329 20 фев '18 в 06:14 2018-02-20 06:14 · Accepted Answer · 2018-02-20 06:14

Скажи мне, если это то, что ты ищешь. Я объясню мой ответ.

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>