テーブルレイアウトの先頭列の列幅をCSSで固定にしたHTMLをSpring Bootで表示してみた

業務で利用するアプリケーションでよく使うHTML上のテーブルレイアウトは、CSSで「table-layout: fixed;」を指定することで、列幅を固定に設定することができる。

今回は、Spring BootのWeb画面上で、CSSでテーブルレイアウトの先頭列の列幅を固定にして表示するサンプルプログラムを作成してみたので、共有する。

前提条件

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

横並びのヘッダーメニューをCSSでデザインしたHTMLをSpring Bootで表示してみた横並びのヘッダーメニューはCSSでflexboxを利用することで実現でき、ヘッダーメニューにカーソルが当たったときのレイアウトも、CSS...

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

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

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

HTMLファイルの内容は以下の通りで、本文にテーブルを2つ上下に並べるようにしている。

<!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>
        ここにヘッダーを書きます。
        <ul>
            <!-- 選択されたヘッダーの色を変えるようにth:classappendタグで設定 -->
            <li th:classappend="${!#strings.isEmpty(select_header) 
                    && select_header.equals('header1')} ? now_header : ''">
                <a th:href="@{/header1}">ヘッダー１</a>
            </li>
            <li th:classappend="${!#strings.isEmpty(select_header) 
                    && select_header.equals('header2')} ? now_header : ''">
                <a th:href="@{/header2}">少し長いヘッダー２</a>
            </li>
            <li th:classappend="${!#strings.isEmpty(select_header) 
                    && select_header.equals('header3')} ? now_header : ''">
                <a th:href="@{/header3}">ヘッダー３</a>
            </li>
            <li th:classappend="${!#strings.isEmpty(select_header) 
                    && select_header.equals('header4')} ? now_header : ''">
                <a th:href="@{/header4}">もう少し長いヘッダー４</a>
            </li>
            <li th:classappend="${!#strings.isEmpty(select_header) 
                    && select_header.equals('header5')} ? now_header : ''">
                <a th:href="@{/header5}">ヘッダー５</a>
            </li>
        </ul>
    </header>
    <main>
        <div class="container">
            <div class="menu">
                ここにメニューを書きます。幅は30%です。
            </div>
            <div class="main">
                <div th:if="!${#strings.isEmpty(select_header_name)}">
                    <div class="show_select_header">
                        選択されたヘッダーは<span th:text="${select_header_name}">
                            (選択されたヘッダー名)</span>です。
                    </div>
                    <br/>
                </div>
                ここに本文を書きます。テーブルを縦横スクロールできるようにします。
                <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>
                <br/>
                ここにもう一つカラム数の違うテーブルを書きます。
                <div class="scroll_table">
                    <table>
                        <thead>
                        <tr>
                            <th>少し長いタイトル１</th>
                            <th>タイトル２</th>
                            <th>もう少し長いタイトル３</th>
                            <th>タイトル４</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>カラム１</td>
                            <td>少し長いカラム２</td>
                            <td>カラム３</td>
                            <td>もう少し長いカラム４</td>
                        </tr>
                        <tr>
                            <td>少し長いカラム１</td>
                            <td>カラム２</td>
                            <td>少し長いカラム３</td>
                            <td>もう少し長いカラム４</td>
                        </tr>
                        <tr>
                            <td>少し長いカラム１</td>
                            <td>少し長いカラム２</td>
                            <td>カラム３</td>
                            <td>もう少し長いカラム４</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </main>
    <footer>
        ここにフッターを書きます。
    </footer>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

<!DOCTYPE html>

<head>

<title>テーブルの先頭カラム幅を固定</title>

</head>

<body>

ここにヘッダーを書きます。

<ul>