teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

ああああああああああああああああああ

2022/05/17 11:12

投稿

wassan_nikoniko
wassan_nikoniko

スコア9

title CHANGED
@@ -1,1 +1,1 @@
1
- table内にスクロールバーを埋め込む方法がわからない
1
+ ああああああああああああああああああ
body CHANGED
@@ -1,63 +1,1 @@
1
- ### 前提・実現したいこと
2
- 画像のように一番右の一列にスクロールバーを埋め込んで表示したいです。
3
-
4
- ### 該当のソースコード
5
-
6
- ```html
7
- <!DOCTYPE html>
8
- <html xmlns:th="http://www.thymeleaf.org">
9
- <head>
10
- <link rel="stylesheet" href="css/productinfo.css" type="text/css">
11
- <meta charset="UTF-8">
1
+ ああああああああああああああああああああああああああああああああああああ
12
- <title>Insert title here</title>
13
- </head>
14
- <body>
15
- <h2 class="title1">商品情報管理システム</h2>
16
- <h2 class="title2">商品情報一覧</h2>
17
- <p class="flash">商品情報を登録しました</p>
18
- <button class="regist" onclick="location.href='./product-registration'">登録</button>
19
- <p th:text="'商品情報件数'+${productcount}+'件'"></p>
20
- <div class="scrollvar" style="overflow-y:scroll">
21
- <table border="1">
22
- <tr>
23
- <th>イメージ</th>
24
- <th>商品ID</th>
25
- <th>ジャンル</th>
26
- <th>メーカー</th>
27
- <th>商品名</th>
28
- <th>販売価格</th>
29
- <th>更新</th>
30
- <th></th>
31
- </tr>
32
- <!-- ここから繰り返し処理 th:を使ってDBから値を持ってくる -->
33
- <!-- productInfoをmodelAttributeしてるためそこから値を持ってくる。 -->
34
- <tr th:each="productInfo:${productInfo}">
35
- <td>
36
- <img th:src="'data:image/png;base64,'+${productInfo.ProductImgOut}"
37
- onerror="this.onerror=null;this.src='/images/noimage.png'">
38
- </td>
39
- <td th:text="${productInfo.ProductID}"></td>
40
- <td th:text="${productInfo.Genre}"></td>
41
- <td th:text="${productInfo.Maker}"></td>
42
- <td th:text="${productInfo.ProductName}"></td>
43
- <td th:text="${productInfo.sellingPrice}"></td>
44
- <td>
45
- <button onclick="location.href='./product-update'">更新</button>
46
- </td>
47
- <td>
48
- <div style="width:30px; overflow-y:scroll;"><!-- この場所にスクロールバーを埋め込みたい-->
49
- </div>
50
- </td>
51
- </tr>
52
- </table>
53
- </div>
54
- </body>
55
- </html>
56
-
57
- ```
58
-
59
- ### 試したこと
60
-
61
- div でtdを囲んでやってみましたが、各セルごとにスクロールバーが出てしまいうまくいきませんでした。
62
-
63
- ![イメージ説明](7d2b16b0b1bee126861d0cdfea4d05c9.png)