Css 动态表的固定表头_Css_Angularjs_Html_Html Table_Angular Ui Bootstrap

Css 动态表的固定表头

css angularjs html

Css 动态表的固定表头,css,angularjs,html,html-table,angular-ui-bootstrap,Css,Angularjs,Html,Html Table,Angular Ui Bootstrap,我有一个非常动态的表，您可以在其中隐藏和显示不同的列（还可以更改列的顺序）我尝试了一些指令和插件，但没有人能为我工作得很好（或者正如我所期望的那样……我做错了）你们能帮我把桌头修好吗可见列： {{column.id} var app=angular.module（'plunker'，[]）；应用程序控制器（'MainCtrl'，函数（$scope）{ $scope.columnsTest=[{ id:'Value1'，核对：正确 }, { id:'Value2'，核对：正确 }

我有一个非常动态的表，您可以在其中隐藏和显示不同的列（还可以更改列的顺序）

我尝试了一些指令和插件，但没有人能为我工作得很好（或者正如我所期望的那样……我做错了）

你们能帮我把桌头修好吗


可见列：
{{column.id}


var app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.columnsTest=[{
id:'Value1'，
核对：正确
}, {
id:'Value2'，
核对：正确
}, {
id:'Value3'，
核对：正确
}];
$scope.columnToggled=函数（列）{
$（'[data col id=“'+column.id+'“]”）。每个（函数（）{
var元素=这个；
if（$（element.hasClass（'ng-hide'））{
$（element.removeClass（'ng-hide'）；
}否则{
$（element.addClass（'ng-hide'）；
}
});
};
$scope.rows=[{
id:1，
“值1”：911，
“价值2”：20，
“价值3”：20
}, {
id:2，
“价值1”：200，
“价值2”：20，
“价值3”：20
}]；//等等。。
});

您想要什么样的视觉效果？（将CSS添加到AD中可以帮助您吗？）我希望在向下滚动与表对象相关的问题“具有固定标题的HTML表”时，标题是固定的。它们与我的动态表不太兼容

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

<head>
<script data-require="angular.js@*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/slate/bootstrap.min.css" />
 <link rel="stylesheet" href="style.css" />
 <script src="script.js"></script>
 </head>

<body>
<div ng:controller="MainCtrl">

<p>Visible Columns:</p>
<div class="cbxList" ng-repeat="column in columnsTest">
  <input type="checkbox" ng-model="column.checked">{{column.id}}
</div>
<br/>

<table border="1" class="table table-striped table-hover table-responsive table-bordered">
  <thead style="font-weight: bold;">
    <tr>
      <th ng-repeat="column in columnsTest" ng-if="column.checked" ng-bind="column.id"></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in rows">
      <td ng-repeat="column in columnsTest" ng-if="column.checked" ng-bind="row[column.id]"></td>
    </tr>
  </tbody>
</table>
</div>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.columnsTest = [{
    id: 'Value1',
    checked: true
  }, {
    id: 'Value2',
    checked: true
  }, {
    id: 'Value3',
    checked: true
  }];


  $scope.columnToggled = function(column) {
    $('[data-col-id="' + column.id + '"]').each(function() {
      var element = this;
      if ($(element).hasClass('ng-hide')) {
        $(element).removeClass('ng-hide');
      } else {
        $(element).addClass('ng-hide');
      }
    });
  };


  $scope.rows = [{
    id: 1,
    "Value1": 911,
    "Value2": 20,
    "Value3": 20
  }, {
    id: 2,
    "Value1": 200,
    "Value2": 20,
    "Value3": 20
  }]; //and so on..
});
</script>
</body>
</html>