teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問テーブルをスクロールする方法

編集履歴

質問編集履歴

10

誤記修正

2018/03/13 00:22

投稿

hw_test
hw_test

スコア13

test CHANGED
@@ -1 +1 @@
1
- テーブルのヘッダー部以外のみスクロールする方法
1
+ テーブルをスクロールする方法
test CHANGED
@@ -1,6 +1,4 @@
1
- phpで作成する表のヘッダー部だけを固定して、
2
-
3
- データ部だけをスクロールするようにしたいです。
1
+ phpで作成する表スクロールするようにしたいです。
4
2
 
5
3
  現状はヘッダー部もスクロールされてしまいます。
6
4
 
@@ -16,7 +14,7 @@
16
14
 
17
15
 
18
16
 
19
- ■ichiran.php
17
+ ■aa_ichiran.php
20
18
 
21
19
 
22
20
 
@@ -76,7 +74,7 @@
76
74
 
77
75
 
78
76
 
79
- ■ichiran_list.php
77
+ ■aa_ichiran_list.php
80
78
 
81
79
 
82
80
 
@@ -86,9 +84,9 @@
86
84
 
87
85
  <tr>
88
86
 
89
- <th scope="col" class="f-weight" style="width:70px;">メーカー名</th>
87
+ <th scope="col" class="f-weight" style="width:70px;">項目名</th>
90
-
88
+
91
- <th scope="col" class="f-weight" style="width:100px;">シリアルNo</th>
89
+ <th scope="col" class="f-weight" style="width:100px;">項目No</th>
92
90
 
93
91
  </tr>';
94
92
 
@@ -136,27 +134,17 @@
136
134
 
137
135
 
138
136
 
137
+
138
+
139
139
  「追記」
140
140
 
141
- ヘッダーの固定についていろんなサイトを検索してみたところ、
142
-
143
- 以下のようなないようがあり、その内容を私のソースに実装しようと考えてみましたが
144
-
145
- わかりませんでしたので、こちらの実装方法など教えていただけると助かります。
146
-
147
- https://so-zou.jp/web-app/tech/css/sample/fixed-header.htm
148
-
149
-
150
-
151
- 「追記２」
152
-
153
141
  ご教示いただきながら修正した最新のソースです。
154
142
 
155
143
  現状、なぜかスクロールが表示されておらず、そのためヘッダーが固定されているかも不明です。
156
144
 
157
145
  ```
158
146
 
159
- ■ichiran.php
147
+ ■aa_ichiran.php
160
148
 
161
149
 
162
150
 
@@ -226,7 +214,7 @@
226
214
 
227
215
 
228
216
 
229
- ■ichiran_list.php
217
+ ■aa_ichiran_list.php
230
218
 
231
219
 
232
220
 
@@ -324,12 +312,6 @@
324
312
 
325
313
  「追記」
326
314
 
327
- 環境はIEでPHPは5.3.0になります。EDGEでも動作確認する予定です。
328
-
329
-
330
-
331
- 「追記」
332
-
333
315
  メーカー名、シリアルNo以外の一部のデータについて今回どう修正するべきか悩んでおりますので記載いたします。
334
316
 
335
317
  ★箇所はもともと質問にあげていたデータで、それ以外が修正不明なデータです。
@@ -350,27 +332,27 @@
350
332
 
351
333
  <th scope="col" class="f-weight" style="width:50px;">&nbsp;</th>
352
334
 
353
- <th scope="col" class="f-weight" style="width:80px;text-align:center;">'.((!empty($lent_ichran)) ? "レンタル":'').'管理番号</th>
354
-
355
- <th scope="col" class="f-weight" style="width:70px;">メーカー名</th>★
356
-
357
- <th scope="col" class="f-weight" style="width:100px;">シリアルNo</th>★
358
-
359
- <th scope="col" class="f-weight" style="width:130px;">オーダ・アイテム</th>
360
-
361
- <th scope="col" class="f-weight" style="width:80px;">件名</th>
362
-
363
- <th scope="col" class="f-weight" style="width:170px;text-align:center;"><a href="#" style="color:'.$sort_mochidashibi_color.';" id="sort" name="mochidashibi" param="'._hs($sort_mochidashibi_img).'">持出日</a></th>
364
-
365
- <th scope="col" class="f-weight" style="width:120px;text-align:center;"><a href="#" style="color:'.$sort_henkyakuyoteibi_color.';" id="sort" name="henkyakuyoteibi" param="'._hs($sort_henkyakuyoteibi_img).'">返却予定日</a></th>
366
-
367
- <th scope="col" class="f-weight" style="width:60px;">非該当<br />
368
-
369
- 証明</th>
370
-
371
- <th scope="col" class="f-weight" style="width:50px;">校正<br>履歴</th>
372
-
373
- <th scope="col" class="f-weight" style="width:70px;">ISO<br />管理対象外</th>
335
+ <th scope="col" class="f-weight" style="width:80px;text-align:center;">'.((!empty($lent_ichran)) ? "項目":'').'１</th>
336
+
337
+ <th scope="col" class="f-weight" style="width:70px;">項目２</th>★
338
+
339
+ <th scope="col" class="f-weight" style="width:100px;">項目３</th>★
340
+
341
+ <th scope="col" class="f-weight" style="width:130px;">項目４</th>
342
+
343
+ <th scope="col" class="f-weight" style="width:80px;">項目５</th>
344
+
345
+ <th scope="col" class="f-weight" style="width:170px;text-align:center;"><a href="#" style="color:'.$sort_mochidashibi_color.';" id="sort" name="mochidashibi" param="'._hs($sort_mochidashibi_img).'">項目６</a></th>
346
+
347
+ <th scope="col" class="f-weight" style="width:120px;text-align:center;"><a href="#" style="color:'.$sort_henkyakuyoteibi_color.';" id="sort" name="henkyakuyoteibi" param="'._hs($sort_henkyakuyoteibi_img).'">項目７</a></th>
348
+
349
+ <th scope="col" class="f-weight" style="width:60px;">項目<br />
350
+
351
+ ８</th>
352
+
353
+ <th scope="col" class="f-weight" style="width:50px;">項目<br>４</th>
354
+
355
+ <th scope="col" class="f-weight" style="width:70px;">ISO<br />項目９</th>
374
356
 
375
357
  </tr>
376
358
 

9

表示されるテーブルのキャプチャを添付しました。

2018/03/13 00:22

投稿

hw_test
hw_test

スコア13

test CHANGED
File without changes
test CHANGED
File without changes

8

詳細を追記します。

2018/03/02 09:11

投稿

hw_test
hw_test

スコア13

test CHANGED
File without changes
test CHANGED
@@ -417,3 +417,95 @@
417
417
  </tr>";
418
418
 
419
419
  ```
420
+
421
+
422
+
423
+ ［追記］
424
+
425
+ 皆さんのたくさんの知恵をいただきましたが、どうもこのテーブルを表示する部分で処理で
426
+
427
+ テーブルのスクロールを消してしまっているようです。
428
+
429
+
430
+
431
+ ```
432
+
433
+ <body style="min-width:100%;">
434
+
435
+ <!--ヘッダーエリア開始-->
436
+
437
+ <span id="spn_headder">
438
+
439
+ <?php require_once './common/inc_header.php'; ?>
440
+
441
+ </span>
442
+
443
+ <!--ヘッダエリアー終了-->
444
+
445
+ <div id="page_t"><img src="img/page_t1.gif" width="500" height="26" alt="備品検索・貸出"/></div>
446
+
447
+
448
+
449
+ <!--メインエリア開始-->
450
+
451
+ <div id="main">
452
+
453
+ <form id="frm_src">
454
+
455
+
456
+
457
+ <table class="hyou3" name="T1" id="T1">
458
+
459
+ <tbody>
460
+
461
+ <tr>
462
+
463
+ <div style="margin-left:30px; padding:6px;" class="ken">
464
+
465
+ <input type="radio" name="rdosrc_type" id="rdosrc_type" value="AND" <?php echo (!empty($_SESSION["ichiran"]["rdosrc_type"]) AND $_SESSION["ichiran"]["rdosrc_type"] == "AND") ? 'checked' : ''; ?> >AND <input type="radio" name="rdosrc_type" id="rdosrc_type" value="OR" <?php echo (!empty($_SESSION["ichiran"]["rdosrc_type"]) AND $_SESSION["ichiran"]["rdosrc_type"] == "OR") ? 'checked' : ''; ?>>OR <input name="kensaku" type="button" id="kensaku" value="検索" class="mlr6" /><input name="reset" type="button" id="reset" value="リセット" class="mlr6"/>
466
+
467
+ </div></td>
468
+
469
+ </tr>
470
+
471
+ </tbody>
472
+
473
+ </table>
474
+
475
+ </form>
476
+
477
+ <input name="page" type="hidden" id="page" value="1" />
478
+
479
+ </div>
480
+
481
+ <hr style="margin:10px 0px" />
482
+
483
+ <input name="ins_cart" type="button" id="ins_cart" value="カートへ入れる" class="mlr6" /><input name="out_excel" type="button" id="out_excel" value="EXCEL出力" class="mlr6" />
484
+
485
+ <div class="hyou2" id="tbldata"></div>
486
+
487
+ </div>
488
+
489
+ <br>
490
+
491
+ <center>
492
+
493
+ <div name="Pagination" id="Pagination" class="pagination"></div>
494
+
495
+ </center>
496
+
497
+ <iframe id="ifm_post" height="0" width="0" src="" ></iframe>
498
+
499
+ </div>
500
+
501
+ <!--メインエリア終了-->
502
+
503
+ <!--フッターエリア開始-->
504
+
505
+ <?php echo file_get_contents('./common/inc_footer.php'); ?>
506
+
507
+ <!--フッターエリア終了-->
508
+
509
+ </body>
510
+
511
+ ```

7

誤記を修正

2018/03/02 09:06

投稿

hw_test
hw_test

スコア13

test CHANGED
File without changes
test CHANGED
@@ -326,16 +326,16 @@
326
326
 
327
327
  環境はIEでPHPは5.3.0になります。EDGEでも動作確認する予定です。
328
328
 
329
+
330
+
331
+ 「追記」
332
+
333
+ メーカー名、シリアルNo以外の一部のデータについて今回どう修正するべきか悩んでおりますので記載いたします。
334
+
329
335
  ★箇所はもともと質問にあげていたデータで、それ以外が修正不明なデータです。
330
336
 
331
337
 
332
338
 
333
- 「追記」
334
-
335
- メーカー名、シリアルNo以外の一部のデータについて今回どう修正するべきか悩んでおりますので記載いたします。
336
-
337
-
338
-
339
339
  ```
340
340
 
341
341
  //ヘッダー部

6

コードを見やすく修正

2018/03/01 02:08

投稿

hw_test
hw_test

スコア13

test CHANGED
File without changes
test CHANGED
@@ -336,6 +336,8 @@
336
336
 
337
337
 
338
338
 
339
+ ```
340
+
339
341
  //ヘッダー部
340
342
 
341
343
  $strHTML = '<table id="tbl_list">
@@ -413,3 +415,5 @@
413
415
  <td align='center'>".((trim($CN->GetFieldData('iso_kanri_other_flg')) == "1") ? "〇" : "&nbsp;")."</td>
414
416
 
415
417
  </tr>";
418
+
419
+ ```

5

不明点の追記

2018/03/01 02:01

投稿

hw_test
hw_test

スコア13

test CHANGED
File without changes
test CHANGED
@@ -324,4 +324,92 @@
324
324
 
325
325
  「追記」
326
326
 
327
- 環境はIEでPHPは5.3.0になります。EDGEでも動作確認する予定です
327
+ 環境はIEでPHPは5.3.0になります。EDGEでも動作確認する予定です。
328
+
329
+ ★箇所はもともと質問にあげていたデータで、それ以外が修正不明なデータです。
330
+
331
+
332
+
333
+ 「追記」
334
+
335
+ メーカー名、シリアルNo以外の一部のデータについて今回どう修正するべきか悩んでおりますので記載いたします。
336
+
337
+
338
+
339
+ //ヘッダー部
340
+
341
+ $strHTML = '<table id="tbl_list">
342
+
343
+ <thead>
344
+
345
+ <tr>
346
+
347
+ <th scope="col" class="f-weight" style="width:20px;"><input type="checkbox" name="btn_on_check" id="btn_on_check" value="all" ></th>
348
+
349
+ <th scope="col" class="f-weight" style="width:50px;">&nbsp;</th>
350
+
351
+ <th scope="col" class="f-weight" style="width:80px;text-align:center;">'.((!empty($lent_ichran)) ? "レンタル":'').'管理番号</th>
352
+
353
+ <th scope="col" class="f-weight" style="width:70px;">メーカー名</th>★
354
+
355
+ <th scope="col" class="f-weight" style="width:100px;">シリアルNo</th>★
356
+
357
+ <th scope="col" class="f-weight" style="width:130px;">オーダ・アイテム</th>
358
+
359
+ <th scope="col" class="f-weight" style="width:80px;">件名</th>
360
+
361
+ <th scope="col" class="f-weight" style="width:170px;text-align:center;"><a href="#" style="color:'.$sort_mochidashibi_color.';" id="sort" name="mochidashibi" param="'._hs($sort_mochidashibi_img).'">持出日</a></th>
362
+
363
+ <th scope="col" class="f-weight" style="width:120px;text-align:center;"><a href="#" style="color:'.$sort_henkyakuyoteibi_color.';" id="sort" name="henkyakuyoteibi" param="'._hs($sort_henkyakuyoteibi_img).'">返却予定日</a></th>
364
+
365
+ <th scope="col" class="f-weight" style="width:60px;">非該当<br />
366
+
367
+ 証明</th>
368
+
369
+ <th scope="col" class="f-weight" style="width:50px;">校正<br>履歴</th>
370
+
371
+ <th scope="col" class="f-weight" style="width:70px;">ISO<br />管理対象外</th>
372
+
373
+ </tr>
374
+
375
+ </thead>
376
+
377
+ ';
378
+
379
+
380
+
381
+
382
+
383
+ //データ部
384
+
385
+ $strHTML .= "<tr ".$bgcolor.">
386
+
387
+ <td align='center'>".$str_use_status."</td>
388
+
389
+ <td align='center'>
390
+
391
+ <input name='syousai' type='button' id='syousai' onclick='fncdisp_details(\"".$CN->GetFieldData('mes_id')."\");' value='詳細' /> </td>
392
+
393
+ <td class='break' style='width:80px;'>"._hs($CN->GetFieldData('kanri_no'))."</td>
394
+
395
+ <td align='center'><a onClick='disp1(\"ph_kakudai.php?id=".$CN->GetFieldData('mes_id')."\")' style='cursor:pointer;'><img src='".$img_path."' width='35' height='35' /></a></td>
396
+
397
+ <td class='break' style='width:70px;'>"._hs($CN->GetFieldData('maker_name'))."</td>★
398
+
399
+ <td class='break' style='width:100px;'>"._hs($CN->GetFieldData('maker_serial'))."</td>★
400
+
401
+ <td>".((trim($CN->GetFieldData('order_no')) != "") ? _hs($CN->GetFieldData('order_no')).'～'._hs($CN->GetFieldData('item_no')) : "")."</td>
402
+
403
+ <td>"._hs($CN->GetFieldData('akenmei'))."</td>
404
+
405
+ <td>".((trim($CN->GetFieldData('loan_date_from')) != "") ? _hs($CN->GetFieldData('loan_date_from')).'～'._hs($CN->GetFieldData('loan_date_to')) : "")."</td>
406
+
407
+ <td align='center'>"._hs($CN->GetFieldData('ret_date'))."</td>
408
+
409
+ <td align='center'>".((trim($CN->GetFieldData('hg_path')) != "") ? "<a href='./upload/".($CN->GetFieldData('hg_path'))."' target='_blank'>有</a>" : "無")."</td>
410
+
411
+ <td align='center'><input name='btn_kousei_hisotry' type='button' id='btn_kousei_hisotry' kiki_id='"._hs($CN->GetFieldData('mes_id'))."' value='開く' /></td>
412
+
413
+ <td align='center'>".((trim($CN->GetFieldData('iso_kanri_other_flg')) == "1") ? "〇" : "&nbsp;")."</td>
414
+
415
+ </tr>";

4

環境について追記

2018/03/01 01:53

投稿

hw_test
hw_test

スコア13

test CHANGED
File without changes
test CHANGED
@@ -319,3 +319,9 @@
319
319
  }
320
320
 
321
321
  ```
322
+
323
+
324
+
325
+ 「追記」
326
+
327
+ 環境はIEでPHPは5.3.0になります。EDGEでも動作確認する予定です

3

コードを見やすく修正

2018/03/01 00:17

投稿

hw_test
hw_test

スコア13

test CHANGED
File without changes
test CHANGED
@@ -154,7 +154,7 @@
154
154
 
155
155
  現状、なぜかスクロールが表示されておらず、そのためヘッダーが固定されているかも不明です。
156
156
 
157
-
157
+ ```
158
158
 
159
159
  ■ichiran.php
160
160
 
@@ -317,3 +317,5 @@
317
317
  height: 220px;
318
318
 
319
319
  }
320
+
321
+ ```

2

現在の最新ソースを記載しました。

2018/02/28 09:11

投稿

hw_test
hw_test

スコア13

test CHANGED
File without changes
test CHANGED
@@ -145,3 +145,175 @@
145
145
  わかりませんでしたので、こちらの実装方法など教えていただけると助かります。
146
146
 
147
147
  https://so-zou.jp/web-app/tech/css/sample/fixed-header.htm
148
+
149
+
150
+
151
+ 「追記２」
152
+
153
+ ご教示いただきながら修正した最新のソースです。
154
+
155
+ 現状、なぜかスクロールが表示されておらず、そのためヘッダーが固定されているかも不明です。
156
+
157
+
158
+
159
+ ■ichiran.php
160
+
161
+
162
+
163
+ <head>
164
+
165
+ <link rel="stylesheet" type="text/css" href="css/test.css" media="screen,tv,print" />
166
+
167
+ </head>
168
+
169
+
170
+
171
+
172
+
173
+ function fncsrc() {
174
+
175
+
176
+
177
+ //リスト表示
178
+
179
+ $.post("./ichiran_list.php",
180
+
181
+ strsrc + "&page=1&sort=" + sort + "&sort_type=" + sort_type + "&chache=" + get_cache()
182
+
183
+ , function(data) {
184
+
185
+
186
+
187
+ try{
188
+
189
+
190
+
191
+ var obj = $.evalJSON(data);
192
+
193
+ total_page = obj.total_page;
194
+
195
+
196
+
197
+ $('[id=tbldata]').html(obj.text);
198
+
199
+
200
+
201
+ initPagination();
202
+
203
+ start_page = 0;
204
+
205
+ }catch( e ){
206
+
207
+ alert(data);
208
+
209
+ }
210
+
211
+
212
+
213
+ });
214
+
215
+ }
216
+
217
+
218
+
219
+ </div>
220
+
221
+ <div class="hyou2" id="tbldata"></div>
222
+
223
+ </div>
224
+
225
+
226
+
227
+
228
+
229
+ ■ichiran_list.php
230
+
231
+
232
+
233
+ //ヘッダー部
234
+
235
+ $strHTML = '<table id="tbl_list" border="0" cellspacing="0" cellpadding="0" style="width:2620px;">
236
+
237
+ <tr>
238
+
239
+ <th scope="col" class="f-weight" style="width:70px;">メーカー名</th>
240
+
241
+ <th scope="col" class="f-weight" style="width:100px;">シリアルNo</th>
242
+
243
+ </tr>';
244
+
245
+
246
+
247
+ if ($datanum > 0) {
248
+
249
+
250
+
251
+ while ($CN->EOF() == true) {
252
+
253
+
254
+
255
+ //データ部
256
+
257
+ $strHTML .= "<tr ".$bgcolor.">
258
+
259
+ <td align='center'>".$str_use_status."</td>
260
+
261
+ <td class='break' style='width:70px;'>"._hs($CN->GetFieldData('maker_name'))."</td>
262
+
263
+ <td class='break' style='width:100px;'>"._hs($CN->GetFieldData('maker_serial'))."</td>
264
+
265
+ </tr>";
266
+
267
+
268
+
269
+ $CN->MoveNext();
270
+
271
+
272
+
273
+ }
274
+
275
+
276
+
277
+ } else {
278
+
279
+ $strHTML .= "<tr><td colspan='28'>該当するデータがありません。</td></tr>";
280
+
281
+ }
282
+
283
+
284
+
285
+
286
+
287
+
288
+
289
+ ■test.css
290
+
291
+
292
+
293
+ table#tbl_list th.maker_name,table#tbl_list td.maker_name{
294
+
295
+ width:70px;
296
+
297
+ }
298
+
299
+ table#tbl_list th.serial_no,table#tbl_list td.serial_no{
300
+
301
+ width:100px;
302
+
303
+ }
304
+
305
+ table#tbl_list thead, tbody {
306
+
307
+ display: block;
308
+
309
+ }
310
+
311
+ table#tbl_list tbody {
312
+
313
+ overflow-x: hidden;
314
+
315
+ overflow-y: scroll;
316
+
317
+ height: 220px;
318
+
319
+ }

1

調べた結果をつい来ました。

2018/02/28 09:11

投稿

hw_test
hw_test

スコア13

test CHANGED
File without changes
test CHANGED
@@ -133,3 +133,15 @@
133
133
 
134
134
 
135
135
  ```
136
+
137
+
138
+
139
+ 「追記」
140
+
141
+ ヘッダーの固定についていろんなサイトを検索してみたところ、
142
+
143
+ 以下のようなないようがあり、その内容を私のソースに実装しようと考えてみましたが
144
+
145
+ わかりませんでしたので、こちらの実装方法など教えていただけると助かります。
146
+
147
+ https://so-zou.jp/web-app/tech/css/sample/fixed-header.htm