固定ヘッダー付きのテーブル内のレコードのスクロール
固定ヘッダーが設定されたスクロール可能なテーブルを作成するにはどのようにすればよいですか?
例: Table Recordsウィジェットを使用して複数の店舗の名前と場所を表示しています。テーブルを縦スクロールできるようにし、ヘッダー行が常に表示されるようにします。
回答
ヘッダーが常に表示されるスクロール可能なテーブルを作成するには、以下の手順を実行します。
-
Table Recordsウィジェット(この場合はTableBodyScroll)の上に、行数が1行で列数がTableレコードと同じ(この場合は
2
)であるTableウィジェット(この場合はFixedTableHeader)を作成します。FixedTableHeaderが新しいテーブルヘッダーになり、次の3つの手順で元のヘッダーの外観を再作成できます。
-
FixedTableHeaderの
Style Classes
を「TableRecords
」に設定します。 -
FixedTableHeaderテーブルで、TableBodyScrollレコードテーブルのヘッダーテキストを再作成します。この場合、1列目に「
Name
」、2列目に「City
」と入力します。 -
FixedTableHeaderの各セルの
Style Classes
を「TableRecords_Header
」に設定します。 -
FixedTableHeaderの最初のセルでスタイルエディタを選択し、
Style Properties Applied
に「padding: 10px 10px 10px 20px;
」を追加します。その他のセルのパディングは、「padding: 10px;
」に設定します。 -
TableBodyScroll Table Recordsを選択し、
Show Header
プロパティを「No
」に、Margin Top
プロパティを「0px
」に設定します。これにより、元のヘッダーが非表示になり、上部の余白が削除されます。
-
FixedTableHeaderの各セルの幅を定義し、TableBodyScrollのコンテンツのセルについても同様に定義します。この場合、最初のセルの
Width
を「33%
」に設定し、2つ目のセルを「67%
」に設定します。これにより、各セルの幅が設定され、テーブルヘッダーの幅とスクロール可能なテーブル本体の幅が等しくなります。
-
TableBodyScrollレコードテーブルの
Style Properties Applied
に以下のCSSスニペットを追加します。table-layout: fixed; word-wrap: break-word;
このCSSスニペットにより、実行時のテーブル本体の幅が常に定義された幅に等しくなり、コンテンツがテーブルのセル外にはみ出さなくなります。
-
TableBodyScroll Table Recordsウィジェットをコンテナに含めます。
-
コンテナを選択し、スタイルエディタの
Style Properties Applied
に以下のCSSスニペットを追加します。height: 200px; overflow-y: auto; padding-top: 0px;
このCSSにより、テーブル本体の高さが
200px
に設定され、必要に応じて縦スクロールバーがテーブル本体に追加され、テーブル本体の上部のパディングが削除されます。