Spring Boot CSS

テーブルレイアウトを縦横スクロールできるようCSSでデザインしたHTMLをSpring Bootで表示してみた

HTML上のテーブルのデータ量が多い場合は、スクロールバーを縦または横に表示できるが、そのレイアウトも、CSSを利用することで、画面レイアウトを整えることができる。

今回は、Spring BootのWeb画面上で、必要に応じて、CSSでテーブルレイアウトのスクロールバーを表示するサンプルプログラムを作成してみたので、共有する。

前提条件

下記記事の実装が完了していること。

テーブルレイアウトを追加しCSSでデザインしたHTMLをSpring Bootで表示してみた業務で利用するアプリケーションでよく使うHTML上のテーブルレイアウトも、CSSを利用することで、画面レイアウトを整えることができる。 ...

サンプルプログラムの作成

作成したサンプルプログラムの構成は以下の通り。
サンプルプログラムの構成
なお、上記の赤枠は、今回変更したプログラムである。

HTMLファイルの内容は以下の通りで、本文のテーブルを、class=”scroll_table”であるdivタグで囲っている。



CSSファイルで追加した内容は以下の通りで、scroll_tableクラスで必要に応じてスクロールバーを表示する「overflow: auto;」という設定を追加し、tableタグで自動改行を無効にして横スクロールする「white-space: nowrap;」という設定を追加している。

その他のソースコード内容は、以下のサイトを参照のこと。
https://github.com/purin-it/java/tree/master/spring-boot-css-table-scroll/demo



サラリーマン型フリーランスSEという働き方でお金の不安を解消しよう先日、「サラリーマン型フリーランスSE」という働き方を紹介するYouTube動画を視聴しましたので、その内容をご紹介します。 「サ...

サンプルプログラムの実行結果

Spring Bootアプリケーションを起動し、Edge(バージョン:94.0.992.38)で「http:// (ホスト名):(ポート番号)」とアクセスした結果は、以下の通り。いずれの画面幅の場合も、ブラウザの本文に表示されるテーブルが、縦横スクロールできるようになっていることが確認できる。

1) 一般的なサイズ(下図では幅:1387px)の場合の実行結果は、以下の通り。
サンプルプログラムの実行結果_1_1

サンプルプログラムの実行結果_1_2 サンプルプログラムの実行結果_1_3 サンプルプログラムの実行結果_1_4



2) 最大サイズ(下図では幅:1920px)の場合の実行結果は、以下の通り。
サンプルプログラムの実行結果_2_1

サンプルプログラムの実行結果_2_2 サンプルプログラムの実行結果_2_3 サンプルプログラムの実行結果_2_4



Code VillageはJavaScriptを中心としたサポート体制が充実したプログラミングスクールだったJavaScriptや、JavaScriptのフレームワーク「React」「Vue」を中心にオンラインで学習できるプログラミングスクール...

3) 最小サイズ(下図では幅:500px)の場合の実行結果は、以下の通り。
サンプルプログラムの実行結果_3_1

サンプルプログラムの実行結果_3_2 サンプルプログラムの実行結果_3_3 サンプルプログラムの実行結果_3_4

要点まとめ

  • HTML上のテーブルのデータ量が多い場合は、スクロールバーを縦または横に表示できるが、そのレイアウトも、CSSを利用することで、画面レイアウトを整えることができる。