###前提・実現したいこと
Bootstrapを使って、テーブルを表示する画面を作ったのですが、DBのカラムが多く横に広がってしまっています。
そのため始めのデータを固定して横スクロールにして見れるようにしたいです。
以下のようにIDとnameの部分を固定して横にスクロールするとageとweightは見えなくなる。といった形のものを作成したいです。(値は適当です。)
何分初めての質問なので何をしたいかでも伝わっていただけると嬉しいです。。。
_____________________
|ID|name|age|weight(kg)|height(cm)|BMI|
|00|aaaa| 10| 40| 140| 20|
--------------------ー
|← 固定→|← スクロール →|
右にスクロール
_____________
|ID|name|height(cm)|BMI|
|00|aaaa| 140| 20|
-------------
|← 固定→|← スクロール →|
###試してみたこと
追記:9/20
CSSで".lock"を作成
今後の汎用性も考えて<th class="lock">~~</th>とすると固定して表示するようにしたいです。
しかし、.lock要素を追加するとタグがすべて重なってしまい、データを見ることができない。
.lockを要素に追加したら、重ならずに横並びするようにしたいです。
###簡易なソースコード
html
1<html xmlns:th="http://www.thymeleaf.org"> 2 <head> 3 <meta charset="UTF-8" /> 4 <title>Hello Thymeleaf</title> 5 </head> 6 <body> 7 <div class="scroll-table-wrap"> 8 <table class="table-hover"> 9 <thead> 10 <tr> 11 <!-- 固定したいデータ --> 12 <th class="lock">ID</th> 13 <th class="lock">name</th> 14 <!-- スクロールできるデータ --> 15 <th>age</th> 16 <th>weight</th> 17 <th>height</th> 18 <th>BMI</th> 19 </tr> 20 </thead> 21 <tbody> 22 <tr> 23 <td class="lock">00</td> 24 <td class="lock">aaaa</td> 25 <td>10</td> 26 <td>40</td> 27 <td>140</td> 28 <td>20</td> 29 </tr> 30 </tbody> 31 </table> 32 </div> 33 </body> 34</html> 35
CSS
1/** テーブルデータの列を左側に固定*/ 2.lock { 3 display: inline; 4 overflow: overlay; 5 position: absolute; 6 text-align: center; 7}
###補足情報(言語/FW/ツール等のバージョンなど)
Spring boot
thymeleaf
回答2件
あなたの回答
tips
プレビュー