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

回答

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

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

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

2. FixedTableHeaderのStyle 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に設定され、必要に応じて縦スクロールバーがテーブル本体に追加され、テーブル本体の上部のパディングが削除されます。