■

CSSのposition:stickyを使ってヘッダ固定のテーブルを作成します。

アプリケーション

Reactive Web

ブラウザ

Chrome

方法

１．TableRecordのStyle Classesに「sticky-header-table」を追加

２．TableRecordをContainerで囲いStyle Classesに「sticky-header-table-container」を設定

３．CSSを追加

div.sticky-header-table-container{
    height: 272px;
    overflow-y: auto;
}
div.sticky-header-table-container table.sticky-header-table{ 
    border-top: none; /* ※1 */
    overflow: auto; /* ※2 */
}
table.sticky-header-table thead tr th{ 
    position: sticky;
    top: 0;
    border-top: var(--border-size-s) solid var(--color-neutral-4); /* ※1 */
}

/* 補足
※1
スクロールするとtableのborder-topは消えてしまうので、thにborder-topを指定。

※2
overflow: auto;がないと タブレットでthが固定されないため
OutSystemsUIの↓を上書きする。
.phone .table, .tablet .table { 
overflow: hidden; }
*/