Skip to main content

 

開発に関するよくある質問

 

 

OutSystems

固定ヘッダー付きのテーブル内のレコードのスクロール

固定ヘッダーが設定されたスクロール可能なテーブルを作成するにはどのようにすればよいですか。

例: Table Recordsウィジェットを使用して複数の店舗の名前と場所を表示しています。テーブルを縦スクロールできるようにし、ヘッダー行が常に表示されるようにします。

回答

ヘッダーが常に表示されるスクロール可能なテーブルを作成するには、以下の手順を実行します。

  1. Table Recordsウィジェット(この場合はTableBodyScroll)の上に、行数が1行で列数がTableレコードと同じ(この場合は2)であるTableウィジェット(この場合はFixedTableHeader)を作成します。

    FixedTableHeaderが新しいテーブルヘッダーになり、次の3つの手順で元のヘッダーの外観を再作成できます。

  2. FixedTableHeaderStyle Classesを「TableRecords」に設定します。

  3. FixedTableHeaderテーブルで、TableBodyScrollレコードテーブルのヘッダーテキストを再作成します。この場合、1列目に「Name」、2列目に「City」と入力します。

  4. FixedTableHeaderの各セルのStyle Classesを「TableRecords_Header」に設定します。

  5. FixedTableHeaderの最初のセルでスタイルエディタを選択し、Style Properties Appliedに「padding: 10px 10px 10px 20px;」を追加します。その他のセルのパディングは、「padding: 10px;」に設定します。

  6. TableBodyScroll Table Recordsを選択し、Show Headerプロパティを「No」に、Margin Topプロパティを「0px」に設定します。

    これにより、元のヘッダーが非表示になり、上部の余白が削除されます。

  7. FixedTableHeaderの各セルの幅を定義し、TableBodyScrollのコンテンツのセルについても同様に定義します。この場合、最初のセルのWidthを「33%」に設定し、2つ目のセルを「67%」に設定します。

    これにより、各セルの幅が設定され、テーブルヘッダーの幅とスクロール可能なテーブル本体の幅が等しくなります。

  8. TableBodyScrollレコードテーブルのStyle Properties Appliedに以下のCSSスニペットを追加します。

    table-layout: fixed;
    word-wrap: break-word;
    

    このCSSスニペットにより、実行時のテーブル本体の幅が常に定義された幅に等しくなり、コンテンツがテーブルのセル外にはみ出さなくなります。

  9. TableBodyScroll Table Recordsウィジェットをコンテナに含めます。

  10. コンテナを選択し、スタイルエディタのStyle Properties Appliedに以下のCSSスニペットを追加します。

    height:200px;
    overflow-y: auto;
    padding-top:0px;
    

    このCSSにより、テーブル本体の高さが200pxに設定され、必要に応じて縦スクロールバーがテーブル本体に追加され、テーブル本体の上部のパディングが削除されます。

  • Was this article helpful?