我正在使用JavaScript&引导(和angularjs,但在这里并不重要)。
我有一个超过垂直页面大小的表。如果用户滚动页面,表格标题将不可见(位于窗口顶部上方)。如果将表部署在可滚动的
div
我试图做的是部署两个表,一个用于标题,另一个用于正文,这是在垂直滚动列表中最后一个部署的表
div
.
Bootstrap会自动为两个表设置表及其列的维度,从而导致页眉和正文之间的不匹配(宽度)。
Adjust_Header_to_Body = function() {
var l_Header_Table_Name = "Header_Table_" + $scope.Tab_Forward_Info.Tab_ID ;
var l_Body_Table_Name = "Body_Table_" + $scope.Tab_Forward_Info.Tab_ID ;
var l_Header_Obj = document.getElementById(l_Header_Table_Name) ;
var l_Body_Obj = document.getElementById(l_Body_Table_Name ) ;
for (var i = 0 ; i < l_Body_Obj.rows[0].cells.length ; i++) {
console.log("First row - cell " + i + " width: " + l_Body_Obj.rows[0].cells[i].offsetWidth ) ;
l_Header_Obj.rows[0].cells[i].offsetWidth = l_Body_Obj.rows[0].cells[i].offsetWidth + "px" ;
//l_Header_Obj.rows[0].cells[i].offsetWidth = l_Body_Obj.rows[0].cells[i].offsetWidth ;
}
}
[注:使用和不使用“px”进行试验,结果无差异]。
我没有收到任何错误,列的宽度被记录到控制台中,但是看不到任何类型的更改。
我想这与Bootstrap的自动调整大小有关,但我不确定这是不是真的,也不知道如何强制它遵守新的大小。
使现代化
按照Enrico的要求,我在这里添加了一个示例HTML和代码,使用了他的一个建议,不幸的是,这并没有产生预期的结果:
HTML:
<!DOCTYPE html>
<html lang="en-us" ng-app="TestApp">
<head>
<meta charset="utf-8">
<meta name="viewpoint" content="with=device-width initial-scale=1.0">
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
<script src="Public_Libs/JQuery/jquery.js"></script>
<script src="Public_Libs/angular-1.5.8/angular.min.js"></script>
<script src="Public_Libs/angular-1.5.8/angular-route.min.js"></script>
<script src="Public_Libs/angular-1.5.8/angular-sanitize.min.js"></script>
<script src="Public_Libs/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="Public_Libs/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="Public_Libs/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="Public_Libs/font-awesome-4.7.0/css/font-awesome.min.css">
<script src="Public_Libs/Charts/Chart.bundle.js"></script>
<script src="Index_Controller.js"></script>
</head>
<body id="Application_Body" ng-controller="Index_Controller" dir="{{Language_Direction}}">
<div style="width:800px;height:700px;overflow-y:auto;margin:auto">
<table id="MyTable" class="table table-hover">
<thead style="display:block;text-align:left">
<tr style="display:block">
<th ng-repeat="One_Header in Data.Headers"> {{One_Header}} </th>
</tr>
</thead>
<tbody style="display:block">
<tr ng-repeat="One_Record in Data.Records">
<td ng-repeat="One_Column in One_Record">
{{One_Column}}
</td>
</tr>
</tbody>
</table>
</div>
</body>
控制器代码:
var TestApp = angular.module( 'TestApp', ['ngRoute' , 'ngSanitize' ]) ;
/**************************************************************************************************/
/**************************************************************************************************/
/* Directive to enable addressing elements created programmatically as soon */
/* as they are fully rendered */
/**************************************************************************************************/
/**************************************************************************************************/
TestApp.directive('onFinishRender', function ($rootScope) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last) {
$rootScope.$broadcast("EventRenderingCompleted");
}
}
};
});
TestApp.directive('compileDirective', ['$compile', '$parse' , function($compile, $parse) {
return {
restrict: 'E',
link: function(scope, element, attr) {
scope.$watch(attr.content, function() {
element.html($parse(attr.content)(scope));
$compile(element.contents())(scope);
}, true);
}
}
}]) ;
TestApp.directive('stringToNumber', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
ngModel.$parsers.push(function(value) {
return '' + value;
});
ngModel.$formatters.push(function(value) {
return parseFloat(value, 10);
});
}
};
});
/**************************************************************************************************/
/**************************************************************************************************/
/**************************************************************************************************/
TestApp.controller('Index_Controller' , ['$rootScope' , '$scope' , function( $rootScope , $scope ) {
$scope.Data = {Headers : [] ,
Records : [] } ;
$scope.Data.Headers = ["Header_1" , "Header_2" , "Header_3" , "Header_4" , "Header_5"] ;
var One_Record ;
for (var i = 0 ; i < 100 ; i++) {
One_Record = []
for (var j = 0 ; j < 5 ; j++) {
One_Record.push("Row " + (i+1).toString() + " | Col " + (j+1).toString()) ;
}
$scope.Data.Records.push(One_Record) ;
}
}]) ;
/****************************************************************************************************************************************************************/
