使用JavaScript匹配HTML表列的宽度

Question

I'm working on Web project using JavaScript & Bootstrap (and angularjs, but not important here). 我正在使用JavaScript和Bootstrap（和angularjs，但在这里并不重要）进行Web项目。

I have a table that exceeds the vertical page size. 我有一个超出垂直页面大小的表。 If the user scrolls the page, the table's header becomes invisible (goes above the top of the window). 如果用户滚动页面，则表的标题变为不可见（位于窗口顶部上方）。 The same if I deploy the table within a scrollable div . 如果将表部署在可滚动的div 。

What I'm trying to do is to deploy two tables, one for the header and the other for the body, being the last deployed within a vertically scrollable div . 我想做的是部署两个表，一个表用于标题，另一个表用于主体，这是在垂直滚动div最后部署的表。

Bootstrap automatically sets the dimensions of the table and its columns for both tables, resulting in a mismatch (in width) between the header and the body. Bootstrap会自动设置两个表的表及其列的尺寸，从而导致标题和正文之间的不匹配（宽度）。

To tackle this, I wrote the following simple function: 为了解决这个问题，我编写了以下简单函数：

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 ;

    }

}

[NOTE: tried with and without the "px" with no difference in the result]. [注意：尝试使用“ px”和不使用“ px”，结果均无差异]。

I get no errors at all, the width of the columns are logged into the console, but no changes of any sort can be seen. 我完全没有错误，列的宽度已登录到控制台，但是看不到任何变化。

I guess this has to do with Bootstrap's auto-resize, but I'm neither sure this is the case nor I know how to force it to honor the new sizes. 我猜想这与Bootstrap的自动调整大小有关，但是我既不确定这种情况，也不确定如何强制其采用新的大小。

Update 更新

Following Enrico's request, I'm adding here a sample HTML and CODE using one of his suggestions which, unfortunately, is not yielding the desired result: 应Enrico的要求，我在这里使用他的建议之一添加了示例HTML和CODE，但不幸的是，该建议未产生预期的结果：

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>

Controller's code: 控制器代码：

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

Instead of splitting in two tables, make use of css and leave the width management to the browser. 与其拆分成两个表，不如使用css并将宽度管理留给浏览器。

There are atleast two ways for achieving the result. 至少有两种方法可以达到目的。

make use of display and overflow css rules - Example 利用display和overflow CSS规则- 示例
make use of position - Example - Jsfiddle in the comments 利用position - 示例 - 注释中的Jsfiddle

使用JavaScript匹配HTML表列的宽度

问题描述

Update 更新

1 个解决方案

解决方案1
0 2018-08-02 14:12:03

使用JavaScript匹配HTML表列的宽度

问题描述

Update 更新

1 个解决方案

解决方案1 0 2018-08-02 14:12:03

解决方案1
0 2018-08-02 14:12:03