sticky row css example

by Pavlo

HTML

<pre>
SCROLL DOWN

    ||
   \  /
    \/
</pre>

<table data-number-column="false">

<thead>
<tr>
<th rowspan="1" colspan="1" colorname="" class="ak-renderer-tableHeader-sortable-column" aria-sort="none"><div class="ak-renderer-tableHeader-sortable-column__button" role="button" tabindex="0" aria-disabled="false"><p data-renderer-start-pos="112"><strong data-renderer-mark="true">Unresized Table</strong></p><figure aria-hidden="true" class="ak-renderer-tableHeader-sorting-icon ak-renderer-tableHeader-sorting-icon__no-order"><div role="presentation"><figure class=" css-2obwft-SortingIcon"><div class="sorting-icon-svg__no_order table-sorting-icon-inactive css-h1duhn-SortingIcon"></div></figure></div></figure></div></th><th rowspan="1" colspan="1" colorname="" class="ak-renderer-tableHeader-sortable-column" aria-sort="none"><div class="ak-renderer-tableHeader-sortable-column__button" role="button" tabindex="0" aria-disabled="false"><p data-renderer-start-pos="131">&nbsp;</p><figure aria-hidden="true" class="ak-renderer-tableHeader-sorting-icon ak-renderer-tableHeader-sorting-icon__no-order"><div role="presentation"><figure class=" css-2obwft-SortingIcon"><div class="sorting-icon-svg__no_order table-sorting-icon-inactive css-h1duhn-SortingIcon"></div></figure></div></figure></div></th><th rowspan="1" colspan="1" colorname="" class="ak-renderer-tableHeader-sortable-column" aria-sort="none"><div class="ak-renderer-tableHeader-sortable-column__button" role="button" tabindex="0" aria-disabled="false"><p data-renderer-start-pos="135">&nbsp;</p><figure aria-hidden="true" class="ak-renderer-tableHeader-sorting-icon ak-renderer-tableHeader-sorting-icon__no-order"><div role="presentation"><figure class=" css-2obwft-SortingIcon"><div class="sorting-icon-svg__no_order table-sorting-icon-inactive css-h1duhn-SortingIcon"></div></figure></div></figure></div></th></tr></thead><tbody><tr><td rowspan="1" colspan="1" colorname=""><p data-renderer-start-pos="141">&nbsp;</p></td><td...

CSS

table {
 border: 1px solid #C1C7D0; 
}
thead {
  position: sticky;inset-block-start: 0;
}
thead tr {
  background-color: lightgreen;
}