使用 Bootstrap 响应表和 AngularJS 修复了第一列

Question

我整个上午都在为这个 CSS 问题苦苦挣扎，但似乎没有任何进展。

基本上，我有一个水平滚动表，我使用了 Bootstrap 响应表，并且刚刚删除了媒体查询，因此它可以在所有屏幕尺寸下水平滚动。我正在使用 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>

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

Answer 1

这是给你的指令：

/*
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);
        }
    };
}]);

请参阅the JsFiddle 进行演示。