Question

我正在使用JavaScript和Bootstrap（和angularjs，但在这里并不重要）从事Web项目。

我有一个超出垂直页面大小的表。如果用户滚动页面，则表的标题变为不可见（位于窗口顶部上方）。如果将表部署在可滚动的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”和不使用“ px”，结果均无差异。

我完全没有错误，列的宽度已记录到控制台中，但是看不到任何变化。

我猜想这与Bootstrap的自动调整大小有关，但是我既不确定这种情况，也不知道如何迫使它遵循新的大小。

更新

应Enrico的要求，我使用他的建议之一在此处添加了示例HTML和CODE，但不幸的是，该建议未产生预期的结果：

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) ;
    }


}]) ;

/****************************************************************************************************************************************************************/

Answer 1

代替使用两个表，而使用CSS并将宽度管理留给浏览器。

至少有两种方法可以实现结果。

使用display和overflow CSS规则-Example
使用position-Example-Jsfiddle in the comments

使用JavaScript匹配HTML表列的宽度

更新

1 个答案: