Question

我在AngularJS项目中创建表，并尝试使用固定标题使其成为可滚动表。

以下是HTML代码：

<div class="container" ng-app="sortApp" ng-controller="mainController">

  <table class="table table-bordered ">
    <thead>
      <tr>
        <td>
          <a href="#" ng-click="sortType = 'name'; sortReverse = !sortReverse">
            Sushi Roll
          </a>
        </td>
        <td>
          <a href="#" ng-click="sortType = 'fish'; sortReverse = !sortReverse">
          Fish Type
          </a>
        </td>
      </tr>
    </thead>

    <tbody>
      <tr ng-repeat="roll in sushi | orderBy:sortType:sortReverse | filter:searchFish">
        <td>{{ roll.name }}</td>
        <td>{{ roll.fish }}</td>
      </tr>
    </tbody>
  </table>
</div>

控制器：

angular.module('sortApp', [])

.controller('mainController', function($scope) {
  $scope.sortType     = 'name'; // Set the default sort type
  $scope.sortReverse  = false;  // Set the default sort order
  $scope.searchFish   = '';     // Set the default search/filter term

  // Create the list of sushi rolls
  $scope.sushi = [
    { name: 'Cali Roll', fish: 'Crab' },
    { name: 'Philly', fish: 'Tuna' },
    { name: 'Tiger', fish: 'Eel' },
    { name: 'Rainbow', fish: 'Variety' },
    { name: 'Cali Roll', fish: 'Crab' },
    { name: 'Philly', fish: 'Tuna' },
    { name: 'Tiger', fish: 'Eel' },
    { name: 'Rainbow', fish: 'Variety' }
  ];

});

Fiddler

我试过这个，用固定标题使表格可滚动：

.tbody-fixed  {
  display: block;
   height: 230px;
  overflow-y: auto;
  width: 100%;
}

这是我如何使用它：

   <tbody class="tbody-fixed">
      <tr ng-repeat="roll in sushi | orderBy:sortType:sortReverse | filter:searchFish">
        <td>{{ roll.name }}</td>
        <td>{{ roll.fish }}</td>
      </tr>
    </tbody>

但它看起来不太好。如何使用固定的标题使上面的表格可滚动？

Answer 1

尝试在两个div中使用两个表。

在第一个div中，表格仅定义标题。

在第二个div中，将Long和一些overflow-y:auto提供给div。并且该表将有数据。

这就是我实现它的方式。如果你小提琴，请告诉我。

使用固定标头使表格可滚动的故障排除

1 个答案: