Javascript 修复了带有引导响应表和AngularJS的第一列

我整个上午都在努力解决CSS问题，但似乎没有任何进展

基本上，我有一个水平滚动表，我使用了引导响应表，只是删除了媒体查询，所以它可以在所有屏幕大小下水平滚动。我使用Angular的ng repeat循环标题数组和应用于这些标题的数据，我希望第一列保持不变。我的HTML如下所示：

<div id="table" class="table-responsive">
        <table class="table table-bordered">
          <tr>
            <th ng-repeat="header in tableHeaders" ng-show="header.show" ng-class="'column-' + $index">
          <a ng-click="sortThis(header.name, $index)">
            <span class="glyphicon glyphicon-chevron-down" aria-hidden="true" ng-show="sortParam !== header.name"></span>
            <span class="glyphicon glyphicon-chevron-" aria-hidden="true" ng-show="sortParam === header.name"></span>
          </a> {{header.name}} 
          <span ng-show="!$first">
            <a ng-click="toggleColumn(header, $index)">X</a>
          </span>
        </th>
      </tr>
      <tr ng-repeat="row in tableData track by $index">
        <td ng-repeat="point in row | orderObjectBy:tableSort track by $index" ng-show="point.show" ng-class="'column-' + $index">{{point.name}}</td>
      </tr>
    </table>
  </div>

{{header.name}
X
{{point.name}

---

我让表格水平滚动，我想冻结第一列。现在，如果有帮助的话，每一列都有自己的类。有什么想法吗？

给你一个指示：

/*
This directive will fix the first column in place and will use `overflow-x:auto` for the subsequent columns.

Example use:

```
<div fixed-first-column>
    <table class="table">
        <tbody>
            <tr>
                <td><div>Row 1</div></td>
                <td>Value 1</td>
                <td>Value 2</td>
            </tr>
            <tr>
                <td><div>Row 2</div></td>
                <td>Value 1</td>
                <td>Value 2</td>
            </tr>
        </tbody>
    </table>
</div>
```
 */
app.ng.directive("fixedFirstColumn", [function () {
    return {
        restrict: "A",
        template: "<div class='table-responsive'><div ng-transclude></div></div>",
        transclude: true,
        link: function ($scope, $element) {
            var interval = setInterval(function () {
                var tr = $element.find("tr");

                angular.forEach(tr, function (i) {
                    var columns = angular.element(i).children();

                    if (columns.length < 1) {
                        // Row with no columns? Ignore it.
                        return;
                    }

                    var column0 = angular.element(columns[0]).children()[0] || columns[0];
                    var column1 = columns[1];

                    // Calculate heights of each <td>.
                    var height0 = (column0).offsetHeight;
                    var height1 = column1 ? column1.offsetHeight : 0;

                    // Calculate final height.
                    var height = Math.max(height0, height1);

                    // Set heights of <td> and <tr>.
                    columns[0].style.height = height + "px";
                    i.style.height = height + "px";

                    if (column1) {
                        column1.style.height = height + "px";
                    }

                    // If <td> heights have stabilized.
                    if (height0 !== 0 && height0 === height1) {
                        clearInterval(interval);
                    }
                });
            }, 1000);
        }
    };
}]);

/*
此指令将固定第一列，并对后续列使用“overflow-x:auto”。
示例用法：
```
一排
值1
价值2
第2排
值1
价值2
```
*/
app.ng.指令（“fixedFirstColumn”，[函数（）{
返回{
限制：“A”，
模板：“”，
是的，
链接：函数（$scope$element）{
var interval=setInterval（函数（）{
var tr=$element.find（“tr”）；
角速度（tr，函数（i）{
var columns=angular.element（i.children（）；
如果（列长度<1）{
//没有列的行？忽略它。
返回；
}
var column0=angular.element（列[0]）.children（）[0]| |列[0]；
var column1=列[1]；
//计算每一个的高度。
var height0=（第0列）；
var height1=column1？column1.offsetHeight:0；
//计算最终高度。
变量高度=数学最大值（高度0，高度1）；
//设置和的高度。
列[0]。style.height=height+“px”；
i、 style.height=高度+px；
如果（第1列）{
column1.style.height=高度+px；
}
//如果高度稳定下来。
如果（高度0！==0&&height0===height1）{
间隔时间；
}
});
}, 1000);
}
};
}]);

---

请参阅演示。

我也在编写一个指令来实现这一点，并且发现这个jQuery示例非常有用。该指令作为table元素的属性应用，不需要列上的特殊类/属性。