在固定高度

时间：2018-01-23 11:44:16

标签： html css angularjs twitter-bootstrap angularjs-ng-repeat

我在我的引导程序表中重复<tbody>，其固定高度为140px，并且如果数据超过该高度则添加了滚动。

当我滚动桌子时，我发现难以修复标题为“2018 2019 2020 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>

5 个答案:

答案 0 :(得分：1)

告诉我这是否是你要找的。我会解释我的答案。

＆＃13;
＆＃13; 
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,
    }
  ]
}]);
＆＃13; 
.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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

根据我的理解，您需要固定的表格标题，并在正文中滚动

我们可以将属性应用和溢出到表体而不是容器，如下所示。

＆＃13;
＆＃13; 
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,
    }]
}]);
＆＃13; 
.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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

我在很长一段时间内遇到了这个问题。我在某处找到了桌子的代码，我只是不记得在哪里。
例如，查看此Plunker 。
如果这对您不起作用，请告诉我。

答案 3 :(得分：-2)

将position: fixed;添加到<tr class="summary-table-header">应该这样做。我还建议添加背景颜色，以使文本不重叠。

＆＃13;
＆＃13; 
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,
    }]
}]);
＆＃13; 
.table-scroll-header-fix { 
    width:238px;
    overflow-y: auto;
    max-height: 140px;
}

.summary-table-header {
position: fixed;
background-color: #fff;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：-2)

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>

相关问题
最新问题