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

編集履歴

質問編集履歴

10

誤記修正

2018/03/13 00:22

投稿

hw_test
hw_test

スコア13

title CHANGED
@@ -1,1 +1,1 @@
1
- テーブルのヘッダー部以外のみスクロールする方法
1
+ テーブルをスクロールする方法
body CHANGED
@@ -1,5 +1,4 @@
1
- phpで作成する表のヘッダー部だけを固定して、
2
- データ部だけをスクロールするようにしたいです。
1
+ phpで作成する表スクロールするようにしたいです。
3
2
  現状はヘッダー部もスクロールされてしまいます。
4
3
  いろんなサイトを見てみましたが、以下のようなソースの場合
5
4
  どのように手を加えたらよいかわかりませんでした。
@@ -7,7 +6,7 @@
7
6
 
8
7
  ```php
9
8
 
10
- ■ichiran.php
9
+ ■aa_ichiran.php
11
10
 
12
11
  function fncsrc() {
13
12
 
@@ -37,13 +36,13 @@
37
36
  </div>
38
37
 
39
38
 
40
- ■ichiran_list.php
39
+ ■aa_ichiran_list.php
41
40
 
42
41
  //ヘッダー部
43
42
  $strHTML = '<table id="tbl_list" border="0" cellspacing="0" cellpadding="0" style="width:2620px;">
44
43
  <tr>
45
- <th scope="col" class="f-weight" style="width:70px;">メーカー名</th>
44
+ <th scope="col" class="f-weight" style="width:70px;">項目名</th>
46
- <th scope="col" class="f-weight" style="width:100px;">シリアルNo</th>
45
+ <th scope="col" class="f-weight" style="width:100px;">項目No</th>
47
46
  </tr>';
48
47
 
49
48
  if ($datanum > 0) {
@@ -67,17 +66,12 @@
67
66
 
68
67
  ```
69
68
 
69
+
70
70
  「追記」
71
- ヘッダーの固定についていろんなサイトを検索してみたところ、
72
- 以下のようなないようがあり、その内容を私のソースに実装しようと考えてみましたが
73
- わかりませんでしたので、こちらの実装方法など教えていただけると助かります。
74
- https://so-zou.jp/web-app/tech/css/sample/fixed-header.htm
75
-
76
- 「追記２」
77
71
  ご教示いただきながら修正した最新のソースです。
78
72
  現状、なぜかスクロールが表示されておらず、そのためヘッダーが固定されているかも不明です。
79
73
  ```
80
- ■ichiran.php
74
+ ■aa_ichiran.php
81
75
 
82
76
  <head>
83
77
  <link rel="stylesheet" type="text/css" href="css/test.css" media="screen,tv,print" />
@@ -112,7 +106,7 @@
112
106
  </div>
113
107
 
114
108
 
115
- ■ichiran_list.php
109
+ ■aa_ichiran_list.php
116
110
 
117
111
  //ヘッダー部
118
112
  $strHTML = '<table id="tbl_list" border="0" cellspacing="0" cellpadding="0" style="width:2620px;">
@@ -161,9 +155,6 @@
161
155
  ```
162
156
 
163
157
  「追記」
164
- 環境はIEでPHPは5.3.0になります。EDGEでも動作確認する予定です。
165
-
166
- 「追記」
167
158
  メーカー名、シリアルNo以外の一部のデータについて今回どう修正するべきか悩んでおりますので記載いたします。
168
159
  ★箇所はもともと質問にあげていたデータで、それ以外が修正不明なデータです。
169
160
 
@@ -174,17 +165,17 @@
174
165
  <tr>
175
166
  <th scope="col" class="f-weight" style="width:20px;"><input type="checkbox" name="btn_on_check" id="btn_on_check" value="all" ></th>
176
167
  <th scope="col" class="f-weight" style="width:50px;">&nbsp;</th>
177
- <th scope="col" class="f-weight" style="width:80px;text-align:center;">'.((!empty($lent_ichran)) ? "レンタル":'').'管理番号</th>
178
- <th scope="col" class="f-weight" style="width:70px;">メーカー名</th>★
179
- <th scope="col" class="f-weight" style="width:100px;">シリアルNo</th>★
180
- <th scope="col" class="f-weight" style="width:130px;">オーダ・アイテム</th>
181
- <th scope="col" class="f-weight" style="width:80px;">件名</th>
182
- <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>
183
- <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>
184
- <th scope="col" class="f-weight" style="width:60px;">非該当<br />
185
- 証明</th>
186
- <th scope="col" class="f-weight" style="width:50px;">校正<br>履歴</th>
187
- <th scope="col" class="f-weight" style="width:70px;">ISO<br />管理対象外</th>
168
+ <th scope="col" class="f-weight" style="width:80px;text-align:center;">'.((!empty($lent_ichran)) ? "項目":'').'１</th>
169
+ <th scope="col" class="f-weight" style="width:70px;">項目２</th>★
170
+ <th scope="col" class="f-weight" style="width:100px;">項目３</th>★
171
+ <th scope="col" class="f-weight" style="width:130px;">項目４</th>
172
+ <th scope="col" class="f-weight" style="width:80px;">項目５</th>
173
+ <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>
174
+ <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>
175
+ <th scope="col" class="f-weight" style="width:60px;">項目<br />
176
+ ８</th>
177
+ <th scope="col" class="f-weight" style="width:50px;">項目<br>４</th>
178
+ <th scope="col" class="f-weight" style="width:70px;">ISO<br />項目９</th>
188
179
  </tr>
189
180
  </thead>
190
181
  ';

9

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

2018/03/13 00:22

投稿

hw_test
hw_test

スコア13

title CHANGED
File without changes
body CHANGED
File without changes

8

詳細を追記します。

2018/03/02 09:11

投稿

hw_test
hw_test

スコア13

title CHANGED
File without changes
body CHANGED
@@ -207,4 +207,50 @@
207
207
  <td align='center'><input name='btn_kousei_hisotry' type='button' id='btn_kousei_hisotry' kiki_id='"._hs($CN->GetFieldData('mes_id'))."' value='開く' /></td>
208
208
  <td align='center'>".((trim($CN->GetFieldData('iso_kanri_other_flg')) == "1") ? "〇" : "&nbsp;")."</td>
209
209
  </tr>";
210
+ ```
211
+
212
+ ［追記］
213
+ 皆さんのたくさんの知恵をいただきましたが、どうもこのテーブルを表示する部分で処理で
214
+ テーブルのスクロールを消してしまっているようです。
215
+
216
+ ```
217
+ <body style="min-width:100%;">
218
+ <!--ヘッダーエリア開始-->
219
+ <span id="spn_headder">
220
+ <?php require_once './common/inc_header.php'; ?>
221
+ </span>
222
+ <!--ヘッダエリアー終了-->
223
+ <div id="page_t"><img src="img/page_t1.gif" width="500" height="26" alt="備品検索・貸出"/></div>
224
+
225
+ <!--メインエリア開始-->
226
+ <div id="main">
227
+ <form id="frm_src">
228
+
229
+ <table class="hyou3" name="T1" id="T1">
230
+ <tbody>
231
+ <tr>
232
+ <div style="margin-left:30px; padding:6px;" class="ken">
233
+ <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"/>
234
+ </div></td>
235
+ </tr>
236
+ </tbody>
237
+ </table>
238
+ </form>
239
+ <input name="page" type="hidden" id="page" value="1" />
240
+ </div>
241
+ <hr style="margin:10px 0px" />
242
+ <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" />
243
+ <div class="hyou2" id="tbldata"></div>
244
+ </div>
245
+ <br>
246
+ <center>
247
+ <div name="Pagination" id="Pagination" class="pagination"></div>
248
+ </center>
249
+ <iframe id="ifm_post" height="0" width="0" src="" ></iframe>
250
+ </div>
251
+ <!--メインエリア終了-->
252
+ <!--フッターエリア開始-->
253
+ <?php echo file_get_contents('./common/inc_footer.php'); ?>
254
+ <!--フッターエリア終了-->
255
+ </body>
210
256
  ```

7

誤記を修正

2018/03/02 09:06

投稿

hw_test
hw_test

スコア13

title CHANGED
File without changes
body CHANGED
@@ -162,10 +162,10 @@
162
162
 
163
163
  「追記」
164
164
  環境はIEでPHPは5.3.0になります。EDGEでも動作確認する予定です。
165
- ★箇所はもともと質問にあげていたデータで、それ以外が修正不明なデータです。
166
165
 
167
166
  「追記」
168
167
  メーカー名、シリアルNo以外の一部のデータについて今回どう修正するべきか悩んでおりますので記載いたします。
168
+ ★箇所はもともと質問にあげていたデータで、それ以外が修正不明なデータです。
169
169
 
170
170
  ```
171
171
  //ヘッダー部

6

コードを見やすく修正

2018/03/01 02:08

投稿

hw_test
hw_test

スコア13

title CHANGED
File without changes
body CHANGED
@@ -167,6 +167,7 @@
167
167
  「追記」
168
168
  メーカー名、シリアルNo以外の一部のデータについて今回どう修正するべきか悩んでおりますので記載いたします。
169
169
 
170
+ ```
170
171
  //ヘッダー部
171
172
  $strHTML = '<table id="tbl_list">
172
173
  <thead>
@@ -205,4 +206,5 @@
205
206
  <td align='center'>".((trim($CN->GetFieldData('hg_path')) != "") ? "<a href='./upload/".($CN->GetFieldData('hg_path'))."' target='_blank'>有</a>" : "無")."</td>
206
207
  <td align='center'><input name='btn_kousei_hisotry' type='button' id='btn_kousei_hisotry' kiki_id='"._hs($CN->GetFieldData('mes_id'))."' value='開く' /></td>
207
208
  <td align='center'>".((trim($CN->GetFieldData('iso_kanri_other_flg')) == "1") ? "〇" : "&nbsp;")."</td>
208
- </tr>";
209
+ </tr>";
210
+ ```

5

不明点の追記

2018/03/01 02:01

投稿

hw_test
hw_test

スコア13

title CHANGED
File without changes
body CHANGED
@@ -161,4 +161,48 @@
161
161
  ```
162
162
 
163
163
  「追記」
164
- 環境はIEでPHPは5.3.0になります。EDGEでも動作確認する予定です
164
+ 環境はIEでPHPは5.3.0になります。EDGEでも動作確認する予定です。
165
+ ★箇所はもともと質問にあげていたデータで、それ以外が修正不明なデータです。
166
+
167
+ 「追記」
168
+ メーカー名、シリアルNo以外の一部のデータについて今回どう修正するべきか悩んでおりますので記載いたします。
169
+
170
+ //ヘッダー部
171
+ $strHTML = '<table id="tbl_list">
172
+ <thead>
173
+ <tr>
174
+ <th scope="col" class="f-weight" style="width:20px;"><input type="checkbox" name="btn_on_check" id="btn_on_check" value="all" ></th>
175
+ <th scope="col" class="f-weight" style="width:50px;">&nbsp;</th>
176
+ <th scope="col" class="f-weight" style="width:80px;text-align:center;">'.((!empty($lent_ichran)) ? "レンタル":'').'管理番号</th>
177
+ <th scope="col" class="f-weight" style="width:70px;">メーカー名</th>★
178
+ <th scope="col" class="f-weight" style="width:100px;">シリアルNo</th>★
179
+ <th scope="col" class="f-weight" style="width:130px;">オーダ・アイテム</th>
180
+ <th scope="col" class="f-weight" style="width:80px;">件名</th>
181
+ <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>
182
+ <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>
183
+ <th scope="col" class="f-weight" style="width:60px;">非該当<br />
184
+ 証明</th>
185
+ <th scope="col" class="f-weight" style="width:50px;">校正<br>履歴</th>
186
+ <th scope="col" class="f-weight" style="width:70px;">ISO<br />管理対象外</th>
187
+ </tr>
188
+ </thead>
189
+ ';
190
+
191
+
192
+ //データ部
193
+ $strHTML .= "<tr ".$bgcolor.">
194
+ <td align='center'>".$str_use_status."</td>
195
+ <td align='center'>
196
+ <input name='syousai' type='button' id='syousai' onclick='fncdisp_details(\"".$CN->GetFieldData('mes_id')."\");' value='詳細' /> </td>
197
+ <td class='break' style='width:80px;'>"._hs($CN->GetFieldData('kanri_no'))."</td>
198
+ <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>
199
+ <td class='break' style='width:70px;'>"._hs($CN->GetFieldData('maker_name'))."</td>★
200
+ <td class='break' style='width:100px;'>"._hs($CN->GetFieldData('maker_serial'))."</td>★
201
+ <td>".((trim($CN->GetFieldData('order_no')) != "") ? _hs($CN->GetFieldData('order_no')).'～'._hs($CN->GetFieldData('item_no')) : "")."</td>
202
+ <td>"._hs($CN->GetFieldData('akenmei'))."</td>
203
+ <td>".((trim($CN->GetFieldData('loan_date_from')) != "") ? _hs($CN->GetFieldData('loan_date_from')).'～'._hs($CN->GetFieldData('loan_date_to')) : "")."</td>
204
+ <td align='center'>"._hs($CN->GetFieldData('ret_date'))."</td>
205
+ <td align='center'>".((trim($CN->GetFieldData('hg_path')) != "") ? "<a href='./upload/".($CN->GetFieldData('hg_path'))."' target='_blank'>有</a>" : "無")."</td>
206
+ <td align='center'><input name='btn_kousei_hisotry' type='button' id='btn_kousei_hisotry' kiki_id='"._hs($CN->GetFieldData('mes_id'))."' value='開く' /></td>
207
+ <td align='center'>".((trim($CN->GetFieldData('iso_kanri_other_flg')) == "1") ? "〇" : "&nbsp;")."</td>
208
+ </tr>";

4

環境について追記

2018/03/01 01:53

投稿

hw_test
hw_test

スコア13

title CHANGED
File without changes
body CHANGED
@@ -158,4 +158,7 @@
158
158
  overflow-y: scroll;
159
159
  height: 220px;
160
160
  }
161
- ```
161
+ ```
162
+
163
+ 「追記」
164
+ 環境はIEでPHPは5.3.0になります。EDGEでも動作確認する予定です

3

コードを見やすく修正

2018/03/01 00:17

投稿

hw_test
hw_test

スコア13

title CHANGED
File without changes
body CHANGED
@@ -76,7 +76,7 @@
76
76
  「追記２」
77
77
  ご教示いただきながら修正した最新のソースです。
78
78
  現状、なぜかスクロールが表示されておらず、そのためヘッダーが固定されているかも不明です。
79
-
79
+ ```
80
80
  ■ichiran.php
81
81
 
82
82
  <head>
@@ -157,4 +157,5 @@
157
157
  overflow-x: hidden;
158
158
  overflow-y: scroll;
159
159
  height: 220px;
160
- }
160
+ }
161
+ ```

2

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

2018/02/28 09:11

投稿

hw_test
hw_test

スコア13

title CHANGED
File without changes
body CHANGED
@@ -71,4 +71,90 @@
71
71
  ヘッダーの固定についていろんなサイトを検索してみたところ、
72
72
  以下のようなないようがあり、その内容を私のソースに実装しようと考えてみましたが
73
73
  わかりませんでしたので、こちらの実装方法など教えていただけると助かります。
74
- https://so-zou.jp/web-app/tech/css/sample/fixed-header.htm
74
+ https://so-zou.jp/web-app/tech/css/sample/fixed-header.htm
75
+
76
+ 「追記２」
77
+ ご教示いただきながら修正した最新のソースです。
78
+ 現状、なぜかスクロールが表示されておらず、そのためヘッダーが固定されているかも不明です。
79
+
80
+ ■ichiran.php
81
+
82
+ <head>
83
+ <link rel="stylesheet" type="text/css" href="css/test.css" media="screen,tv,print" />
84
+ </head>
85
+
86
+
87
+ function fncsrc() {
88
+
89
+ //リスト表示
90
+ $.post("./ichiran_list.php",
91
+ strsrc + "&page=1&sort=" + sort + "&sort_type=" + sort_type + "&chache=" + get_cache()
92
+ , function(data) {
93
+
94
+ try{
95
+
96
+ var obj = $.evalJSON(data);
97
+ total_page = obj.total_page;
98
+
99
+ $('[id=tbldata]').html(obj.text);
100
+
101
+ initPagination();
102
+ start_page = 0;
103
+ }catch( e ){
104
+ alert(data);
105
+ }
106
+
107
+ });
108
+ }
109
+
110
+ </div>
111
+ <div class="hyou2" id="tbldata"></div>
112
+ </div>
113
+
114
+
115
+ ■ichiran_list.php
116
+
117
+ //ヘッダー部
118
+ $strHTML = '<table id="tbl_list" border="0" cellspacing="0" cellpadding="0" style="width:2620px;">
119
+ <tr>
120
+ <th scope="col" class="f-weight" style="width:70px;">メーカー名</th>
121
+ <th scope="col" class="f-weight" style="width:100px;">シリアルNo</th>
122
+ </tr>';
123
+
124
+ if ($datanum > 0) {
125
+
126
+ while ($CN->EOF() == true) {
127
+
128
+ //データ部
129
+ $strHTML .= "<tr ".$bgcolor.">
130
+ <td align='center'>".$str_use_status."</td>
131
+ <td class='break' style='width:70px;'>"._hs($CN->GetFieldData('maker_name'))."</td>
132
+ <td class='break' style='width:100px;'>"._hs($CN->GetFieldData('maker_serial'))."</td>
133
+ </tr>";
134
+
135
+ $CN->MoveNext();
136
+
137
+ }
138
+
139
+ } else {
140
+ $strHTML .= "<tr><td colspan='28'>該当するデータがありません。</td></tr>";
141
+ }
142
+
143
+
144
+
145
+ ■test.css
146
+
147
+ table#tbl_list th.maker_name,table#tbl_list td.maker_name{
148
+ width:70px;
149
+ }
150
+ table#tbl_list th.serial_no,table#tbl_list td.serial_no{
151
+ width:100px;
152
+ }
153
+ table#tbl_list thead, tbody {
154
+ display: block;
155
+ }
156
+ table#tbl_list tbody {
157
+ overflow-x: hidden;
158
+ overflow-y: scroll;
159
+ height: 220px;
160
+ }

1

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

2018/02/28 09:11

投稿

hw_test
hw_test

スコア13

title CHANGED
File without changes
body CHANGED
@@ -65,4 +65,10 @@
65
65
  $strHTML .= "<tr><td colspan='28'>該当するデータがありません。</td></tr>";
66
66
  }
67
67
 
68
- ```
68
+ ```
69
+
70
+ 「追記」
71
+ ヘッダーの固定についていろんなサイトを検索してみたところ、
72
+ 以下のようなないようがあり、その内容を私のソースに実装しようと考えてみましたが
73
+ わかりませんでしたので、こちらの実装方法など教えていただけると助かります。
74
+ https://so-zou.jp/web-app/tech/css/sample/fixed-header.htm