質問編集履歴

4

文の追加

2021/07/28 08:56

投稿

K-actus
K-actus

スコア22

test CHANGED
File without changes
test CHANGED
@@ -46,7 +46,7 @@
46
46
 
47
47
  <tr>
48
48
 
49
- <td valign="top" th:each="group: ${HogaMap}">
49
+ <td valign="top" th:each="group: ${FugaMap}">
50
50
 
51
51
  <th:block th:each="item: ${group.value}">
52
52
 
@@ -68,6 +68,56 @@
68
68
 
69
69
  この場合レイアウトが画像でいう一番データの多いAとBが基準となった升目になるため、データの少ないAやBの要素には大きな空白が存在していました。
70
70
 
71
+
72
+
73
+ 以下、現在のソースとそのレイアウトです。
74
+
75
+ ```HTML
76
+
77
+ <div class='text-nowrap'>
78
+
79
+ <div class = "BlockPart" th:each="group: ${HogeMap}">
80
+
81
+ <th:block th:each="item: ${group.value}">
82
+
83
+ <!--中略-->
84
+
85
+ </th:block>
86
+
87
+ </div><br>
88
+
89
+ <div class = "BlockPart" th:each="group: ${FugaMap}">
90
+
91
+ <th:block th:each="item: ${group.value}">
92
+
93
+ <!--中略-->
94
+
95
+ </th:block>
96
+
97
+ </div>
98
+
99
+ </div>
100
+
101
+ ```
102
+
103
+ ```CSS
104
+
105
+ .SSPart{
106
+
107
+ display: inline-block;
108
+
109
+ border-style: solid;
110
+
111
+ }
112
+
113
+ ```
114
+
115
+ ![](ddfd6f1d2cc1af7855a18a98708b3514.png)
116
+
117
+ 上の画像の状態から隙間を無くしたい(上方向に詰めたい)です。
118
+
119
+
120
+
71
121
  ###
72
122
 
73
123
 

3

ソースコードの修正

2021/07/28 08:56

投稿

K-actus
K-actus

スコア22

test CHANGED
File without changes
test CHANGED
@@ -25,6 +25,8 @@
25
25
  再現は出来ていませんが、以前tableを使って書いていたときのhtmlを載せておきます。
26
26
 
27
27
  ```HTML
28
+
29
+ <div class='text-nowrap'>
28
30
 
29
31
  <table class="table table-bordered" >
30
32
 
@@ -58,6 +60,8 @@
58
60
 
59
61
  </table>
60
62
 
63
+ </div>
64
+
61
65
  ```
62
66
 
63
67
 

2

文の修正

2021/07/28 07:48

投稿

K-actus
K-actus

スコア22

test CHANGED
File without changes
test CHANGED
@@ -62,7 +62,7 @@
62
62
 
63
63
 
64
64
 
65
- この場合画像でいうAとBが升目になるため、データの少ないAやBの要素には大きな空白が存在していました。
65
+ この場合レイアウトが画像でいう一番データの多いAとBが基準となった升目になるため、データの少ないAやBの要素には大きな空白が存在していました。
66
66
 
67
67
  ###
68
68
 

1

文の修正

2021/07/28 06:50

投稿

K-actus
K-actus

スコア22

test CHANGED
File without changes
test CHANGED
@@ -20,6 +20,54 @@
20
20
 
21
21
 
22
22
 
23
+ ###コード
24
+
25
+ 再現は出来ていませんが、以前tableを使って書いていたときのhtmlを載せておきます。
26
+
27
+ ```HTML
28
+
29
+ <table class="table table-bordered" >
30
+
31
+ <tr>
32
+
33
+ <td valign="top" th:each="group: ${HogeMap}">
34
+
35
+ <th:block th:each="item: ${group.value}">
36
+
37
+ <!-- 中略 -->
38
+
39
+ </th:block>
40
+
41
+ </td>
42
+
43
+ </tr>
44
+
45
+ <tr>
46
+
47
+ <td valign="top" th:each="group: ${HogaMap}">
48
+
49
+ <th:block th:each="item: ${group.value}">
50
+
51
+ <!--中略-->
52
+
53
+ </th:block>
54
+
55
+ </td>
56
+
57
+ </tr>
58
+
59
+ </table>
60
+
61
+ ```
62
+
63
+
64
+
65
+ この場合画像でいうAとBが升目になるため、データの少ないAやBの要素には大きな空白が存在していました。
66
+
67
+ ###
68
+
69
+
70
+
23
71
  何か綺麗な書き方があれば教えてほしいです。よろしくお願いします。
24
72
 
25
73