整个早上我都在为这个 CSS 问题苦苦挣扎,但我似乎没有取得任何进展。
基本上,我有一个水平滚动的表格,为此我使用了 Bootstrap Responsive Tables,并且只是删除了媒体查询,因此它可以在所有屏幕尺寸下水平滚动。我正在使用 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>
我让表格水平滚动,我想卡住第一列。现在,如果有帮助,每一列都有自己的类。有什么想法吗?
最佳答案
这是给你的指令:
/*
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用于演示。
关于javascript - 修复了 Bootstrap 响应表和 AngularJS 的第一列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27868675/