Question

我正在处理一个项目，并被要求修复表格的第一行。他们基本上使用控制器在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）{...}。

如何在此上下文中强制所有后续行向下？

Answer 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/

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

1 个答案: