Позиция фиксированного покрытия последующих строк таблицы (через ng-repeat)

Question

Я работаю над проектом и попросил зафиксировать первую строку таблицы. Они по существу создали уникальную первую строку в нг-повторе с контроллером, как показано ниже (контроллер присваивает заголовки, такие как марка, адрес, имя и т.д.):

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