質問編集履歴
5
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
以下のようにIDとnameの部分を固定して横にスクロールするとageとweightは見えなくなる。といった形のものを作成したいです。(値は適当です。)
|
|
7
7
|
何分初めての質問なので何をしたいかでも伝わっていただけると嬉しいです。。。
|
|
8
|
+
|
|
8
9
|
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
|
|
9
10
|
|ID|name|age|weight(kg)|height(cm)|BMI|
|
|
10
11
|
|00|aaaa| 10| 40| 140| 20|
|
|
@@ -19,6 +20,14 @@
|
|
|
19
20
|
－－－－－－－－－－－－－
|
|
20
21
|
|← 固定→|← スクロール →|
|
|
21
22
|
|
|
23
|
+
|
|
24
|
+
###試してみたこと
|
|
25
|
+
追記：9/20
|
|
26
|
+
CSSで".lock"を作成
|
|
27
|
+
今後の汎用性も考えて<th class="lock">～～</th>とすると固定して表示するようにしたいです。
|
|
28
|
+
しかし、.lock要素を追加するとタグがすべて重なってしまい、データを見ることができない。
|
|
29
|
+
.lockを要素に追加したら、重ならずに横並びするようにしたいです。
|
|
30
|
+
|
|
22
31
|
###簡易なソースコード
|
|
23
32
|
```html
|
|
24
33
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
@@ -32,8 +41,8 @@
|
|
|
32
41
|
<thead>
|
|
33
42
|
<tr>
|
|
34
43
|
<!-- 固定したいデータ -->
|
|
35
|
-
<th>ID</th>
|
|
44
|
+
<th class="lock">ID</th>
|
|
36
|
-
<th>name</th>
|
|
45
|
+
<th class="lock">name</th>
|
|
37
46
|
<!-- スクロールできるデータ -->
|
|
38
47
|
<th>age</th>
|
|
39
48
|
<th>weight</th>
|
|
@@ -43,8 +52,8 @@
|
|
|
43
52
|
</thead>
|
|
44
53
|
<tbody>
|
|
45
54
|
<tr>
|
|
46
|
-
<td>00</td>
|
|
55
|
+
<td class="lock">00</td>
|
|
47
|
-
<td>aaaa</td>
|
|
56
|
+
<td class="lock">aaaa</td>
|
|
48
57
|
<td>10</td>
|
|
49
58
|
<td>40</td>
|
|
50
59
|
<td>140</td>
|
|
@@ -58,6 +67,15 @@
|
|
|
58
67
|
|
|
59
68
|
```
|
|
60
69
|
|
|
70
|
+
```CSS
|
|
71
|
+
/** テーブルデータの列を左側に固定*/
|
|
72
|
+
.lock {
|
|
73
|
+
display: inline;
|
|
74
|
+
overflow: overlay;
|
|
75
|
+
position: absolute;
|
|
76
|
+
text-align: center;
|
|
77
|
+
}
|
|
78
|
+
```
|
|
61
79
|
|
|
62
80
|
###補足情報(言語/FW/ツール等のバージョンなど)
|
|
63
81
|
Spring boot
|
4
内容の編集
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,46 +1,61 @@
|
|
|
1
1
|
###前提・実現したいこと
|
|
2
2
|
Bootstrapを使って、テーブルを表示する画面を作ったのですが、DBのカラムが多く横に広がってしまっています。
|
|
3
|
-
そのため
|
|
3
|
+
そのため始めのデータを固定して横スクロールにして見れるようにしたいです。
|
|
4
4
|
<th>タグにclass要素を追加して固定すると思うのですが何を入力すれば良いのでしょうか？
|
|
5
5
|
|
|
6
6
|
以下のようにIDとnameの部分を固定して横にスクロールするとageとweightは見えなくなる。といった形のものを作成したいです。(値は適当です。)
|
|
7
7
|
何分初めての質問なので何をしたいかでも伝わっていただけると嬉しいです。。。
|
|
8
|
-
|
|
8
|
+
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
|
|
9
9
|
|ID|name|age|weight(kg)|height(cm)|BMI|
|
|
10
10
|
|00|aaaa| 10| 40| 140| 20|
|
|
11
|
+
－－－－－－－－－－－－－－－－－－－－ー
|
|
11
12
|
|← 固定→|← スクロール →|
|
|
12
13
|
|
|
14
|
+
|
|
13
15
|
右にスクロール
|
|
16
|
+
＿＿＿＿＿＿＿＿＿＿＿＿＿
|
|
14
17
|
|ID|name|height(cm)|BMI|
|
|
15
18
|
|00|aaaa| 140| 20|
|
|
19
|
+
－－－－－－－－－－－－－
|
|
16
20
|
|← 固定→|← スクロール →|
|
|
17
21
|
|
|
18
22
|
###簡易なソースコード
|
|
19
23
|
```html
|
|
24
|
+
<html xmlns:th="http://www.thymeleaf.org">
|
|
25
|
+
<head>
|
|
26
|
+
<meta charset="UTF-8" />
|
|
27
|
+
<title>Hello Thymeleaf</title>
|
|
28
|
+
</head>
|
|
29
|
+
<body>
|
|
20
|
-
<div class="scroll-table-wrap">
|
|
30
|
+
<div class="scroll-table-wrap">
|
|
21
|
-
|
|
31
|
+
<table class="table-hover">
|
|
22
|
-
|
|
32
|
+
<thead>
|
|
23
|
-
|
|
33
|
+
<tr>
|
|
34
|
+
<!-- 固定したいデータ -->
|
|
24
|
-
|
|
35
|
+
<th>ID</th>
|
|
25
|
-
|
|
36
|
+
<th>name</th>
|
|
37
|
+
<!-- スクロールできるデータ -->
|
|
26
|
-
|
|
38
|
+
<th>age</th>
|
|
27
|
-
|
|
39
|
+
<th>weight</th>
|
|
28
|
-
|
|
40
|
+
<th>height</th>
|
|
29
|
-
|
|
41
|
+
<th>BMI</th>
|
|
30
|
-
|
|
42
|
+
</tr>
|
|
31
|
-
|
|
43
|
+
</thead>
|
|
32
|
-
|
|
44
|
+
<tbody>
|
|
33
|
-
|
|
45
|
+
<tr>
|
|
34
|
-
|
|
46
|
+
<td>00</td>
|
|
35
|
-
|
|
47
|
+
<td>aaaa</td>
|
|
36
|
-
|
|
48
|
+
<td>10</td>
|
|
37
|
-
|
|
49
|
+
<td>40</td>
|
|
38
|
-
|
|
50
|
+
<td>140</td>
|
|
39
|
-
|
|
51
|
+
<td>20</td>
|
|
40
|
-
|
|
52
|
+
</tr>
|
|
41
|
-
|
|
53
|
+
</tbody>
|
|
42
|
-
|
|
54
|
+
</table>
|
|
43
|
-
</div>
|
|
55
|
+
</div>
|
|
56
|
+
</body>
|
|
57
|
+
</html>
|
|
58
|
+
|
|
44
59
|
```
|
|
45
60
|
|
|
46
61
|
|
3
編集
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
画面に表示されたデータを固定して表示したい
|
body
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
###前提・実現したいこと
|
|
2
2
|
Bootstrapを使って、テーブルを表示する画面を作ったのですが、DBのカラムが多く横に広がってしまっています。
|
|
3
3
|
そのため一部のデータを固定して横スクロールにして見れるようにしたいです。
|
|
4
|
+
<th>タグにclass要素を追加して固定すると思うのですが何を入力すれば良いのでしょうか？
|
|
5
|
+
|
|
4
6
|
以下のようにIDとnameの部分を固定して横にスクロールするとageとweightは見えなくなる。といった形のものを作成したいです。(値は適当です。)
|
|
5
7
|
何分初めての質問なので何をしたいかでも伝わっていただけると嬉しいです。。。
|
|
6
8
|
|
|
@@ -13,7 +15,8 @@
|
|
|
13
15
|
|00|aaaa| 140| 20|
|
|
14
16
|
|← 固定→|← スクロール →|
|
|
15
17
|
|
|
16
|
-
###簡易なソースコード
|
|
18
|
+
###簡易なソースコード
|
|
19
|
+
```html
|
|
17
20
|
<div class="scroll-table-wrap">
|
|
18
21
|
<table class="table-hover">
|
|
19
22
|
<thead>
|
2
コードの編集
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
|00|aaaa| 140| 20|
|
|
14
14
|
|← 固定→|← スクロール →|
|
|
15
15
|
|
|
16
|
-
###簡易なソースコード
|
|
16
|
+
###簡易なソースコード<code>```html
|
|
17
17
|
<div class="scroll-table-wrap">
|
|
18
18
|
<table class="table-hover">
|
|
19
19
|
<thead>
|
|
@@ -38,7 +38,9 @@
|
|
|
38
38
|
</tbody>
|
|
39
39
|
</table>
|
|
40
40
|
</div>
|
|
41
|
+
```
|
|
41
42
|
|
|
43
|
+
|
|
42
44
|
###補足情報(言語/FW/ツール等のバージョンなど)
|
|
43
45
|
Spring boot
|
|
44
46
|
thymeleaf
|
1
タグの追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
File without changes
|