Good day.

There are two tables (table tag). One is located exactly below the other. The top table has one row. In the bottom "X" lines. The number of columns in the top and bottom tables is exactly the same.

Question: how to assign a width equal to the width of the corresponding column of the lower table to each of the columns in the upper table? The catch is that I use Angulyar. Ie, of course, you can go through the DOM and try to change it there. But at the moment when the corresponding piece of code is launched in the script, the Angular view has not yet displayed the data from the model, and the code simply sees an empty table.

  • why not use one table? - Grundy
  • perhaps because the lower table will scroll? - Marat Batalandabad

1 answer 1

Use ng-init, it starts after the page loads.

The following example is for only one first column, but the principle is clear.

<div ng-controller="syncCollController" ng-init="init()"> <style> td { background: lightblue; } </style> {{name}} <table> <tr> <td ng-style="col1Style">head 1</td> <td>head 2</td> <td>head 3</td> </tr> </table> <table> <tr> <td id="col1">Row 1 Col 1</td> <td>Row 1 Col 2</td> <td>Row 1 Col 3</td> </tr> <tr> <td>Row 2 Col 1</td> <td>Row 2 Col 2</td> <td>Row 2 Col 3</td> </tr> </table> </div> <script> app.controller('syncCollController', ['$scope', function ($scope) { $scope.col1Style = { width: "0px" }; $scope.init = function () { var col1 = angular.element(document.querySelector("#col1")); $scope.col1Style = { width: col1.prop("clientWidth") + "px" }; }; }]); </script>