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

質問編集履歴

3

ソースの更新

2019/04/01 18:22

投稿

gobindar
gobindar

スコア51

title CHANGED
File without changes
body CHANGED
@@ -15,148 +15,354 @@
15
15
 
16
16
  宜しくお願い致します。
17
17
 
18
+ ### 現状
18
19
 
20
+ ※一旦
21
+ https://teratail.com/questions/182096
22
+ 質問当初の状態に戻しております
23
+
24
+ 不自然な間が開くケース(検索画面だが、検索がヒットしなかった場合=要素の縦の
25
+ 長さが短い場合に発生するため、テーブル要素はない)
19
26
  ```php
20
27
 
21
28
  <body>
22
- <div class="wrapper">
29
+ <div class="wrapper">
23
- <div class="container-fluid">
30
+ <div class="container-fluid">
24
- <div class="row">
31
+ <div class="row">
25
32
 
26
- <!-- left sidebar -->
27
- <div class="d-none d-lg-block col-lg-2 no-padding">
28
- <div class="sidebar border">
29
- <nav class="sidebar-menu" role="navigation">
30
- <ul>
31
- <li class="bg-deepblue">AAA</li>
32
- <div class="d-block my-1">
33
- <div class="dropright_top">
34
- <a href="#" class="dropright-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a>
35
- <ul class="dropdown-menu multi-level">
36
- <li><a href="#">Default</a></li>
37
- <li class="dropdown-submenu">
38
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
39
- <ul class="dropdown-menu">
40
- <li><a href="#">sub menu1</a></li>
41
- <li class="dropdown-submenu">
42
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu1</a>
43
- <ul class="dropdown-menu">
44
- <li class="dropdown-submenu">
45
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu2</a>
46
- <ul class="dropdown-menu">
47
- <li><a href="#">sub menu3</a></li>
48
- <li><a href="#">sub menu3</a></li>
49
- <li><a href="#">sub menu3</a></li>
50
- <li><a href="#">sub menu3</a></li>
51
- <li><a href="#">sub menu3</a></li>
52
- <li><a href="#">sub menu3</a></li>
53
- </ul>
54
- </li>
55
- </ul>
56
- </li>
57
- </ul>
58
- </li>
59
- </ul>
60
- </div>
61
- </div>
62
- <li class="bg-deepblue">BBBB</li>
63
- <div class="d-block my-1">
64
- <div class="dropright_top">
65
- <a href="#" class="dropright-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a>
66
- <ul class="dropdown-menu multi-level">
67
- <li><a href="#">Default</a></li>
68
- <li class="dropdown-submenu">
69
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
70
- <ul class="dropdown-menu">
71
- <li><a href="#">sub menu1</a></li>
72
- <li class="dropdown-submenu">
73
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu1</a>
74
- <ul class="dropdown-menu">
75
- <li class="dropdown-submenu">
76
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu2</a>
77
- <ul class="dropdown-menu">
78
- <li><a href="#">sub menu3</a></li>
79
- <li><a href="#">sub menu3</a></li>
80
- <li><a href="#">sub menu3</a></li>
81
- </ul>
82
- </li>
83
- </ul>
84
- </li>
85
- </ul>
86
- </li>
87
- </ul>
88
- </div>
89
- </div>
90
- <li class="bg-deepblue">CCCCC</li>
91
- </ul>
33
+ <!-- left sidebar -->
34
+ <div class="d-none d-lg-block col-lg-2 no-padding">
35
+ <div class="sidebar border">
36
+ <nav class="sidebar-menu" role="navigation">
37
+ <ul>
38
+ <li class="bg-deepblue">AAA</li>
39
+ <div class="d-block my-1">
40
+ <div class="dropright_top">
41
+ <a href="#" class="dropright-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a>
42
+ <ul class="dropdown-menu multi-level">
43
+ <li><a href="#">Default</a></li>
44
+ <li class="dropdown-submenu">
45
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
46
+ <ul class="dropdown-menu">
47
+ <li><a href="#">sub menu1</a></li>
48
+ <li class="dropdown-submenu">
49
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu1</a>
50
+ <ul class="dropdown-menu">
51
+ <li class="dropdown-submenu">
52
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu2</a>
53
+ <ul class="dropdown-menu">
54
+ <li><a href="#">sub menu3</a></li>
55
+ </ul>
56
+ </li>
57
+ </ul>
58
+ </li>
59
+ </ul>
60
+ </li>
61
+ </ul>
62
+ </div>
63
+ </div>
64
+ <li class="bg-deepblue">BBBB</li>
65
+ <div class="d-block my-1">
66
+ <div class="dropright_top">
67
+ <a href="#" class="dropright-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a>
68
+ <ul class="dropdown-menu multi-level">
69
+ <li><a href="#">Default</a></li>
70
+ <li class="dropdown-submenu">
71
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
72
+ <ul class="dropdown-menu">
73
+ <li><a href="#">sub menu1</a></li>
74
+ <li class="dropdown-submenu">
75
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu1</a>
76
+ <ul class="dropdown-menu">
77
+ <li class="dropdown-submenu">
78
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu2</a>
79
+ <ul class="dropdown-menu">
80
+
81
+ <li><a href="#">sub menu3</a></li>
82
+ </ul>
83
+ </li>
84
+ </ul>
85
+ </li>
86
+ </ul>
87
+ </li>
88
+ </ul>
89
+ </div>
90
+ </div>
91
+ <li class="bg-deepblue">CCCCC</li>
92
+ </ul>
92
93
  </nav>
93
94
  </div>
94
- </div>
95
+ </div>
95
96
 
96
- <!-- contents -->
97
+ <!-- contents -->
97
- <div class="col-md-12 col-lg-10">
98
+ <div class="col-md-12 col-lg-10">
98
- <div class="container">
99
+ <div class="container">
99
100
 
100
- <div class="row">
101
+ <div class="row">
101
- <div class="col-lg-12">
102
+ <div class="col-lg-12">
102
- <div class="title_frame">
103
+ <div class="title_frame">
103
- <div class="title_letter d-inline">
104
+ <div class="title_letter d-inline">
104
- DDDDDD
105
+ DDDDDD
105
- </div>
106
+ </div>
106
- <div class="d-inline search_result">
107
+ <div class="d-inline search_result">
107
- </div>
108
+ </div>
108
- </div>
109
+ </div>
109
- </div>
110
+ </div>
110
- </div>
111
+ </div>
111
112
 
112
- <div class="row">
113
+ <div class="row">
113
- <div class="col-lg-12">
114
+ <div class="col-lg-12">
114
- <!-- content -->
115
+ <!-- content -->
115
- <div class="row">
116
+ <div class="row">
116
- <div class="col-lg-12">
117
+ <div class="col-lg-12">
117
118
 
118
- <div class="middle_title">
119
+ <div class="middle_title">
119
- <div class="middle_title_text">
120
+ <div class="middle_title_text">
120
- <strong>EEEEEE</strong>
121
+ <strong>EEEEEE</strong>
121
- </div>
122
122
  </div>
123
+ </div>
123
124
 
124
- <div class="text-center my-5">FFFFFFF</div>
125
+ <div class="text-center my-5">FFFFFFF</div>
125
-
126
+
126
127
  </div>
127
128
  </div>
128
- </div>
129
+ </div>
129
- </div>
130
+ </div>
130
131
 
131
- <!-- button area -->
132
+ <!-- button area -->
132
- <div class="row">
133
+ <div class="row">
133
134
 
134
-
135
- </div>
136
135
 
137
- <!-- advertisement -->
138
- <div class="row">
139
- <div class="col-lg-12 both-side-padding">
140
- <div class="advertisement mx-auto w-7">
141
- <img src="AAA.png" class="img-fluid" alt="banner1">
142
- </div>
136
+ </div>
143
- </div>
144
- </div>
145
- </div>
146
- </div>
147
137
 
148
- </div>
149
- </div>
150
- <div class="footer">
138
+ <!-- advertisement -->
151
- <div class="text">
139
+ <div class="row">
152
- <a href="show_company">AAAAAA</a>&nbsp;&nbsp;&nbsp;
140
+ <div class="col-lg-12 both-side-padding">
153
- <!-- <a href="trade_law.php">AAAAAA</a>&nbsp;&nbsp;&nbsp; -->
154
- <a href="show_u">AAAAAA</a><br />
141
+ <div class="advertisement mx-auto w-7">
155
- <a href="show_i">AAAAAA</a><br />
156
- <a href="show_d">AAAAAA</a>&nbsp;&nbsp;&nbsp;
157
- <a href="inquiry">AAAAAA</a><br />
142
+ <img src="AAA.png" class="img-fluid" alt="banner1">
158
- <div class="pr">Copyright&copy; <a href="index.php">AAAAAA</a> All Rights Reserved.</div>
159
- <div>
160
143
  </div>
161
- </div>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ </div>
150
+ </div>
151
+ <div class="footer">
152
+ <div class="text">
153
+ <a href="AAAA">AAAAAA</a>&nbsp;&nbsp;&nbsp;
154
+ <div class="pr">Copyright&copy; <a href="index.php">AAAAAA</a> All Rights Reserved.</div>
155
+ <div>
156
+ </div>
157
+ </div>
158
+ ```
159
+
160
+ 不自然な間が開かないケース(テーブル要素があり、要素の縦が長いため、間が空かない)
161
+
162
+
163
+ ```php
164
+
165
+ <body>
166
+ <div class="wrapper">
167
+ <div class="container-fluid">
168
+ <div class="row">
169
+
170
+ <!-- left sidebar -->
171
+ <div class="d-none d-lg-block col-lg-2 no-padding">
172
+ <div class="sidebar border">
173
+ <nav class="sidebar-menu" role="navigation">
174
+ <ul>
175
+ <li class="bg-deepblue">AAAA</li>
176
+ <div class="d-block my-1">
177
+ <div class="dropright_top">
178
+ <a href="#" class="dropright-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a>
179
+ <ul class="dropdown-menu multi-level">
180
+ <li><a href="#">Default</a></li>
181
+ <li class="dropdown-submenu">
182
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
183
+ <ul class="dropdown-menu">
184
+ <li><a href="#">sub menu1</a></li>
185
+ <li class="dropdown-submenu">
186
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu1</a>
187
+ <ul class="dropdown-menu">
188
+ <li class="dropdown-submenu">
189
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu2</a>
190
+ <ul class="dropdown-menu">
191
+ <li><a href="#">sub menu3</a></li>
192
+ </ul>
193
+ </li>
194
+ </ul>
195
+ </li>
196
+ </ul>
197
+ </li>
198
+ </ul>
199
+ </div>
200
+ </div>
201
+ <li class="bg-deepblue">AAAA</li>
202
+ <div class="d-block my-1">
203
+ <div class="dropright_top">
204
+ <a href="#" class="dropright-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a>
205
+ <ul class="dropdown-menu multi-level">
206
+ <li><a href="#">Default</a></li>
207
+ <li class="dropdown-submenu">
208
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
209
+ <ul class="dropdown-menu">
210
+ <li><a href="#">sub menu1</a></li>
211
+ <li class="dropdown-submenu">
212
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu1</a>
213
+ <ul class="dropdown-menu">
214
+ <li class="dropdown-submenu">
215
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu2</a>
216
+ <ul class="dropdown-menu">
217
+ <li><a href="#">sub menu3</a></li>
218
+ <li><a href="#">sub menu3</a></li>
219
+ <li><a href="#">sub menu3</a></li>
220
+ </ul>
221
+ </li>
222
+ </ul>
223
+ </li>
224
+ </ul>
225
+ </li>
226
+ </ul>
227
+ </div>
228
+ </div>
229
+ <li class="bg-deepblue">AAAA</li>
230
+ </ul>
231
+ </nav>
232
+ </div>
233
+ </div>
234
+
235
+ <!-- contents -->
236
+ <div class="col-md-12 col-lg-10">
237
+ <div class="container">
238
+
239
+ <div class="row">
240
+ <div class="col-lg-12">
241
+ <div class="title_frame">
242
+ <div class="title_letter d-inline">
243
+ AAAA
244
+ </div>
245
+ <div class="d-inline search_result">
246
+ ( 2 /
247
+ 3 件を表示中 )
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+
253
+ <div class="row">
254
+ <div class="col-lg-12">
255
+ <!-- content -->
256
+ <div class="row">
257
+ <div class="col-lg-12">
258
+
259
+ <div class="middle_title">
260
+ <div class="middle_title_text">
261
+ <strong>AAAA</strong>
262
+ </div>
263
+ </div>
264
+
265
+
266
+ <div class="table-responsive-xl">
267
+ <table class="table table-bordered tablefix" >
268
+ <!-- title row-->
269
+ <tr>
270
+ <th style="width:20px;">ID</th>
271
+ <th style="width:130px;"AAAA</th>
272
+ <th style="width:120px;">AAAA</th>
273
+ <th style="width:250px;">AAAA</th>
274
+ <th style="width:250px;">AAAA</th>
275
+ <th style="width:50px;">AAAA</th>
276
+ </tr>
277
+
278
+ <tr>
279
+ <td style="width:25px;">3</td>
280
+ <td style="width:180px;">AAAA</td>
281
+ <td style="width:120px;">sadgasdg</td>
282
+ <td style="width:450px;">asdg</td>
283
+ <td style="width:450px;">asdg / adsg</td>
284
+ <td style="width:80px; text-align:center;">
285
+ <a href="AAAA">AAAA</a>
286
+ </td>
287
+ </tr>
288
+ <tr>
289
+ <td style="width:25px;">2</td>
290
+ <td style="width:180px;">AAAA</td>
291
+ <td style="width:120px;">adsgds</td>
292
+ <td style="width:450px;">sadg</td>
293
+ <td style="width:450px;">adsg / asdg</td>
294
+ <td style="width:80px; text-align:center;">
295
+ <a href="AAAA">AAAA</a>
296
+ </td>
297
+ </tr>
298
+
299
+ </table>
300
+ </div>
301
+
302
+ <a href="AAAA" class="AAAA"><i class="fas fa-file-download mr-1"></i>AAAA</a>
303
+
304
+ <ul class="pagination">
305
+
306
+ <!-- <li class="page-item disabled"><span class="page-link">&laquo;</span></li> -->
307
+ <li class="page-item disabled"><span class="page-link"></span></li>
308
+
309
+
310
+
311
+
312
+
313
+ <li class="page-item active"><span class="page-link">1</span></li>
314
+ <li class="page-item"><a class="page-link" hAAAA">2</a></li>
315
+
316
+
317
+ <!-- <li class="page-item"><a class="page-link" href="AAAA" rel="next">&raquo;</a></li> -->
318
+ <li class="page-item"><a class="page-link" href="AAAA" rel="next"><u>次へ</u></a></li>
319
+ </ul>
320
+
321
+
322
+
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </div>
327
+
328
+ <!-- button area -->
329
+ <div class="row">
330
+
331
+
332
+ </div>
333
+
334
+ <!-- advertisement -->
335
+ <div class="row">
336
+ <div class="col-lg-12 both-side-padding">
337
+ <div class="advertisement mx-auto w-7">
338
+ <img src="AAAA" class="img-fluid" alt="banner1">
339
+ </div>
340
+ </div>
341
+ </div>
342
+ </div>
343
+ </div>
344
+
345
+ </div>
346
+ </div>
347
+ <div class="footer">
348
+ <div class="text">
349
+ <a href="AAAA">AAAA</a><br />
350
+ <div class="pr">Copyright&copy; <a href="index.php">AAAA</a> All Rights Reserved.</div>
351
+ <div>
352
+ </div>
353
+
354
+
355
+ </div>
356
+ ```
357
+
358
+
359
+ テーブル要素のcss
360
+ ```php
361
+ @media (max-width: 1199.98px)
362
+ .table-responsive-xl {
363
+ display: block;
364
+ width: 100%;
365
+ overflow-x: auto;}
366
+
367
+
162
368
  ```

2

ソースの追加

2019/04/01 18:22

投稿

gobindar
gobindar

スコア51

title CHANGED
File without changes
body CHANGED
@@ -13,4 +13,150 @@
13
13
  代替手段がなかなか見つからないため、
14
14
  知見を共有して頂けないでしょうか。
15
15
 
16
- 宜しくお願い致します。
16
+ 宜しくお願い致します。
17
+
18
+
19
+ ```php
20
+
21
+ <body>
22
+ <div class="wrapper">
23
+ <div class="container-fluid">
24
+ <div class="row">
25
+
26
+ <!-- left sidebar -->
27
+ <div class="d-none d-lg-block col-lg-2 no-padding">
28
+ <div class="sidebar border">
29
+ <nav class="sidebar-menu" role="navigation">
30
+ <ul>
31
+ <li class="bg-deepblue">AAA</li>
32
+ <div class="d-block my-1">
33
+ <div class="dropright_top">
34
+ <a href="#" class="dropright-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a>
35
+ <ul class="dropdown-menu multi-level">
36
+ <li><a href="#">Default</a></li>
37
+ <li class="dropdown-submenu">
38
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
39
+ <ul class="dropdown-menu">
40
+ <li><a href="#">sub menu1</a></li>
41
+ <li class="dropdown-submenu">
42
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu1</a>
43
+ <ul class="dropdown-menu">
44
+ <li class="dropdown-submenu">
45
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu2</a>
46
+ <ul class="dropdown-menu">
47
+ <li><a href="#">sub menu3</a></li>
48
+ <li><a href="#">sub menu3</a></li>
49
+ <li><a href="#">sub menu3</a></li>
50
+ <li><a href="#">sub menu3</a></li>
51
+ <li><a href="#">sub menu3</a></li>
52
+ <li><a href="#">sub menu3</a></li>
53
+ </ul>
54
+ </li>
55
+ </ul>
56
+ </li>
57
+ </ul>
58
+ </li>
59
+ </ul>
60
+ </div>
61
+ </div>
62
+ <li class="bg-deepblue">BBBB</li>
63
+ <div class="d-block my-1">
64
+ <div class="dropright_top">
65
+ <a href="#" class="dropright-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a>
66
+ <ul class="dropdown-menu multi-level">
67
+ <li><a href="#">Default</a></li>
68
+ <li class="dropdown-submenu">
69
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
70
+ <ul class="dropdown-menu">
71
+ <li><a href="#">sub menu1</a></li>
72
+ <li class="dropdown-submenu">
73
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu1</a>
74
+ <ul class="dropdown-menu">
75
+ <li class="dropdown-submenu">
76
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu2</a>
77
+ <ul class="dropdown-menu">
78
+ <li><a href="#">sub menu3</a></li>
79
+ <li><a href="#">sub menu3</a></li>
80
+ <li><a href="#">sub menu3</a></li>
81
+ </ul>
82
+ </li>
83
+ </ul>
84
+ </li>
85
+ </ul>
86
+ </li>
87
+ </ul>
88
+ </div>
89
+ </div>
90
+ <li class="bg-deepblue">CCCCC</li>
91
+ </ul>
92
+ </nav>
93
+ </div>
94
+ </div>
95
+
96
+ <!-- contents -->
97
+ <div class="col-md-12 col-lg-10">
98
+ <div class="container">
99
+
100
+ <div class="row">
101
+ <div class="col-lg-12">
102
+ <div class="title_frame">
103
+ <div class="title_letter d-inline">
104
+ DDDDDD
105
+ </div>
106
+ <div class="d-inline search_result">
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </div>
111
+
112
+ <div class="row">
113
+ <div class="col-lg-12">
114
+ <!-- content -->
115
+ <div class="row">
116
+ <div class="col-lg-12">
117
+
118
+ <div class="middle_title">
119
+ <div class="middle_title_text">
120
+ <strong>EEEEEE</strong>
121
+ </div>
122
+ </div>
123
+
124
+ <div class="text-center my-5">FFFFFFF</div>
125
+
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- button area -->
132
+ <div class="row">
133
+
134
+
135
+ </div>
136
+
137
+ <!-- advertisement -->
138
+ <div class="row">
139
+ <div class="col-lg-12 both-side-padding">
140
+ <div class="advertisement mx-auto w-7">
141
+ <img src="AAA.png" class="img-fluid" alt="banner1">
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </div>
147
+
148
+ </div>
149
+ </div>
150
+ <div class="footer">
151
+ <div class="text">
152
+ <a href="show_company">AAAAAA</a>&nbsp;&nbsp;&nbsp;
153
+ <!-- <a href="trade_law.php">AAAAAA</a>&nbsp;&nbsp;&nbsp; -->
154
+ <a href="show_u">AAAAAA</a><br />
155
+ <a href="show_i">AAAAAA</a><br />
156
+ <a href="show_d">AAAAAA</a>&nbsp;&nbsp;&nbsp;
157
+ <a href="inquiry">AAAAAA</a><br />
158
+ <div class="pr">Copyright&copy; <a href="index.php">AAAAAA</a> All Rights Reserved.</div>
159
+ <div>
160
+ </div>
161
+ </div>
162
+ ```

1

初心者マークの付与

2019/04/01 17:56

投稿

gobindar
gobindar

スコア51

title CHANGED
File without changes
body CHANGED
File without changes