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

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

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

前提条件

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

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

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

作成したサンプルプログラムの構成は以下の通り。

なお、上記の赤枠は、今回変更したプログラムである。

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

<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>テーブルの縦横スクロール</title>
    <!-- CSSファイルを読み込む -->
    <link th:href="@{/css/demo.css}" rel="stylesheet" type="text/css" />
    <!-- タイトル左のfavicon画像を設定する -->
    <link rel="icon" th:href="@{/img/purin.jpg}">
</head>
<body>
    <header>
        ここにヘッダーを書きます。
    </header>
    <main>
        <div class="container">
            <div class="menu">
                ここにメニューを書きます。幅は30%です。
            </div>
            <div class="main">
                ここに本文を書きます。テーブルを縦横スクロールできるようにします。
                <div class="scroll_table">
                    <table>
                        <thead>
                        <tr>
                            <th>タイトル１</th>
                            <th>タイトル２</th>
                            <th>少し長いタイトル３</th>
                            <th>タイトル４</th>
                            <th>もう少し長いタイトル５</th>
                            <th>タイトル６</th>
                            <th>さらにもう少し長いタイトル７</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>カラム１</td>
                            <td>少し長いカラム２</td>
                            <td>カラム３</td>
                            <td>もう少し長いカラム４</td>
                            <td>カラム５</td>
                            <td>カラム６</td>
                            <td>さらにもう少し長いカラム７</td>
                        </tr>
                        <tr>
                            <td>少し長いカラム１</td>
                            <td>カラム２</td>
                            <td>少し長いカラム３</td>
                            <td>もう少し長いカラム４</td>
                            <td>カラム５</td>
                            <td>少し長いカラム６</td>
                            <td>さらにもう少し長いカラム７</td>
                        </tr>
                        <tr>
                            <td>少し長いカラム１</td>
                            <td>少し長いカラム２</td>
                            <td>カラム３</td>
                            <td>もう少し長いカラム４</td>
                            <td>カラム５</td>
                            <td>カラム６</td>
                            <td>さらにもう少し長いカラム７</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </main>
    <footer>
        ここにフッターを書きます。
    </footer>
</body>
</html>

【PR】「Filmora」は初心者でも本格的な動画編集ができる大変便利なツールだった「Filmora」は初心者でも使いやすい動画編集ツールで、テンプレートとして利用できるテキスト・動画・音楽などが充実していると共に、複数...

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

/* テーブルスクロール(本文内)のレイアウト */
.scroll_table {
    /* テーブル(本文内)を縦横スクロールするための設定 */
    overflow: auto;
    /* テーブルの右余白(ボックス外)を20pxに設定 */
    margin-right: 20px;
    /* 縦スクロール確認のため、テーブルの高さを200pxに設定 */
    height: 200px;
}
/* テーブル(本文内)のレイアウト */
main table {
    /* テーブルの上下余白(ボックス外)を20px、
      左右余白(ボックス外)を40pxに設定 */
    margin: 20px 40px;
    /* 隣接するセルのボーダーを重ねて表示する設定 */
    border-collapse: collapse;
    /* カラム数が少なくてもテーブル幅を最大に保つため
      テーブルの幅を(本文全体-左右余白(80px))に設定 */
    width: calc(100% - 80px);
    /* テーブル(本文内)を横スクロールするための設定 */
    white-space: nowrap;
}

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