位置固定覆盖后续表格行（通过 ng-repeat）答案

【问题标题】：Position fixed covering subsequent table rows (via ng-repeat)位置固定覆盖后续表格行（通过 ng-repeat）
【发布时间】：2015-08-05 02:40:25
【问题描述】：

我正在处理一个项目，并被要求修复表格的第一行。他们基本上在 ng-repeat 中使用控制器创建了一个唯一的第一行，如下所示（控制器分配品牌、地址、名称等标题）：

<table border="1">
                <tr>
                    <td ng-repeat="thead in resultHeader">
                        <a href="" ng-click="order(thead.line)">{{thead.head}}</a>
                        <span class="sortorder" ng-show="predicate === thead.line" ng-class="{reverse:reverse}"></span>
                    </td>
                </tr>
                <tr ng-repeat="line in model.resultList | orderBy:predicate:reverse | limitTo:model.pageSize:model.beginFrom">
                    <td>{{line.brand}}</td>
                    <td>{{line.rep}}<span ng-hide="line.rep=='' || line.rep_name==''">-</span>{{line.rep_name}}</td>
                    <td>{{line.soldto}}</td>
                    <td>{{line.soldto_status}}</td>
                    <td>{{line.credit_status}}</td>
                    <td>{{line.shipto}}</td>
                    <td>{{line.name}}</td>
                    ...
                </tr>
            </table>

我可以使用固定位置修复第一行而不会出现问题，但是尝试仅向第二行添加填充不起作用：table tr:nth-child(2) {...}。

如何在这种情况下强制所有后续行向下？

【问题讨论】：

如果您没有将 CSS 包含在问题中，就不可能帮助您解决问题。
@Roope 唯一值得注意的 CSS 是 'table tr:first-child { position: fixed; }'。这使第一行保持不变，但通过 'table tr:nth-child(2) { padding-top: 35px }' 向第二行添加填充不会导致任何更改。
你能用它创建一个 jsFiddle 吗？

标签： css angularjs

【解决方案1】：

这取决于您希望如何设置表格的格式，但您可以将仍在流动的项目下推到<table>。

table {
  padding-top: 22px;
}
table tr:first-child {
  position: fixed;
  height: 20px;
}

注意，我们不会为后续的 tr 兄弟姐妹设置任何内容。

但是，根据您的第一行高度，您需要使用一些 JS 设置填充，因为无法在 CSS 中动态获取该信息。

$(document).ready(function(){
  var h = $('table tr:first-child').height();
  $('table').css('padding-top', h);
});

此外，position: fixed; 相对于窗口定位元素，而position: absolute; 相对于设置为position: relative; 的最近父容器定位。我不知道您将第一行（可能是标题）固定到窗口的原因，但您可能需要考虑以下几点：

table {
  position: fixed;
  padding-top: 22px;
}
table tr:first-child {
  position: absolute;
  top: 0;
  left: 0;
}

https://jsfiddle.net/L5eu0vax/

【讨论】：