phpで作成する表スクロールするようにしたいです。
現状はヘッダー部もスクロールされてしまいます。
いろんなサイトを見てみましたが、以下のようなソースの場合
どのように手を加えたらよいかわかりませんでした。
ご存知のかたご教示ください。
php
1 2■aa_ichiran.php 3 4function fncsrc() { 5 6 //リスト表示 7 $.post("./ichiran_list.php", 8 strsrc + "&page=1&sort=" + sort + "&sort_type=" + sort_type + "&chache=" + get_cache() 9 , function(data) { 10 11 try{ 12 13 var obj = $.evalJSON(data); 14 total_page = obj.total_page; 15 16 $('[id=tbldata]').html(obj.text); 17 18 initPagination(); 19 start_page = 0; 20 }catch( e ){ 21 alert(data); 22 } 23 24 }); 25} 26 27</div> 28<div class="hyou2" id="tbldata" style="width:1168px;height:220px;overflow:scroll;"> 29</div> 30 31 32■aa_ichiran_list.php 33 34//ヘッダー部 35$strHTML = '<table id="tbl_list" border="0" cellspacing="0" cellpadding="0" style="width:2620px;"> 36 <tr> 37 <th scope="col" class="f-weight" style="width:70px;">項目名</th> 38 <th scope="col" class="f-weight" style="width:100px;">項目No</th> 39 </tr>'; 40 41if ($datanum > 0) { 42 43 while ($CN->EOF() == true) { 44 45 //データ部 46 $strHTML .= "<tr ".$bgcolor."> 47 <td align='center'>".$str_use_status."</td> 48 <td class='break' style='width:70px;'>"._hs($CN->GetFieldData('maker_name'))."</td> 49 <td class='break' style='width:100px;'>"._hs($CN->GetFieldData('maker_serial'))."</td> 50 </tr>"; 51 52 $CN->MoveNext(); 53 54 } 55 56} else { 57 $strHTML .= "<tr><td colspan='28'>該当するデータがありません。</td></tr>"; 58} 59
「追記」
ご教示いただきながら修正した最新のソースです。
現状、なぜかスクロールが表示されておらず、そのためヘッダーが固定されているかも不明です。
■aa_ichiran.php <head> <link rel="stylesheet" type="text/css" href="css/test.css" media="screen,tv,print" /> </head> function fncsrc() { //リスト表示 $.post("./ichiran_list.php", strsrc + "&page=1&sort=" + sort + "&sort_type=" + sort_type + "&chache=" + get_cache() , function(data) { try{ var obj = $.evalJSON(data); total_page = obj.total_page; $('[id=tbldata]').html(obj.text); initPagination(); start_page = 0; }catch( e ){ alert(data); } }); } </div> <div class="hyou2" id="tbldata"></div> </div> ■aa_ichiran_list.php //ヘッダー部 $strHTML = '<table id="tbl_list" border="0" cellspacing="0" cellpadding="0" style="width:2620px;"> <tr> <th scope="col" class="f-weight" style="width:70px;">メーカー名</th> <th scope="col" class="f-weight" style="width:100px;">シリアルNo</th> </tr>'; if ($datanum > 0) { while ($CN->EOF() == true) { //データ部 $strHTML .= "<tr ".$bgcolor."> <td align='center'>".$str_use_status."</td> <td class='break' style='width:70px;'>"._hs($CN->GetFieldData('maker_name'))."</td> <td class='break' style='width:100px;'>"._hs($CN->GetFieldData('maker_serial'))."</td> </tr>"; $CN->MoveNext(); } } else { $strHTML .= "<tr><td colspan='28'>該当するデータがありません。</td></tr>"; } ■test.css table#tbl_list th.maker_name,table#tbl_list td.maker_name{ width:70px; } table#tbl_list th.serial_no,table#tbl_list td.serial_no{ width:100px; } table#tbl_list thead, tbody { display: block; } table#tbl_list tbody { overflow-x: hidden; overflow-y: scroll; height: 220px; }
「追記」
メーカー名、シリアルNo以外の一部のデータについて今回どう修正するべきか悩んでおりますので記載いたします。
★箇所はもともと質問にあげていたデータで、それ以外が修正不明なデータです。
//ヘッダー部 $strHTML = '<table id="tbl_list"> <thead> <tr> <th scope="col" class="f-weight" style="width:20px;"><input type="checkbox" name="btn_on_check" id="btn_on_check" value="all" ></th> <th scope="col" class="f-weight" style="width:50px;"> </th> <th scope="col" class="f-weight" style="width:80px;text-align:center;">'.((!empty($lent_ichran)) ? "項目":'').'1</th> <th scope="col" class="f-weight" style="width:70px;">項目2</th>★ <th scope="col" class="f-weight" style="width:100px;">項目3</th>★ <th scope="col" class="f-weight" style="width:130px;">項目4</th> <th scope="col" class="f-weight" style="width:80px;">項目5</th> <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).'">項目6</a></th> <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).'">項目7</a></th> <th scope="col" class="f-weight" style="width:60px;">項目<br /> 8</th> <th scope="col" class="f-weight" style="width:50px;">項目<br>4</th> <th scope="col" class="f-weight" style="width:70px;">ISO<br />項目9</th> </tr> </thead> '; //データ部 $strHTML .= "<tr ".$bgcolor."> <td align='center'>".$str_use_status."</td> <td align='center'> <input name='syousai' type='button' id='syousai' onclick='fncdisp_details(\"".$CN->GetFieldData('mes_id')."\");' value='詳細' /> </td> <td class='break' style='width:80px;'>"._hs($CN->GetFieldData('kanri_no'))."</td> <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> <td class='break' style='width:70px;'>"._hs($CN->GetFieldData('maker_name'))."</td>★ <td class='break' style='width:100px;'>"._hs($CN->GetFieldData('maker_serial'))."</td>★ <td>".((trim($CN->GetFieldData('order_no')) != "") ? _hs($CN->GetFieldData('order_no')).'~'._hs($CN->GetFieldData('item_no')) : "")."</td> <td>"._hs($CN->GetFieldData('akenmei'))."</td> <td>".((trim($CN->GetFieldData('loan_date_from')) != "") ? _hs($CN->GetFieldData('loan_date_from')).'~'._hs($CN->GetFieldData('loan_date_to')) : "")."</td> <td align='center'>"._hs($CN->GetFieldData('ret_date'))."</td> <td align='center'>".((trim($CN->GetFieldData('hg_path')) != "") ? "<a href='./upload/".($CN->GetFieldData('hg_path'))."' target='_blank'>有</a>" : "無")."</td> <td align='center'><input name='btn_kousei_hisotry' type='button' id='btn_kousei_hisotry' kiki_id='"._hs($CN->GetFieldData('mes_id'))."' value='開く' /></td> <td align='center'>".((trim($CN->GetFieldData('iso_kanri_other_flg')) == "1") ? "〇" : " ")."</td> </tr>";
[追記]
皆さんのたくさんの知恵をいただきましたが、どうもこのテーブルを表示する部分で処理で
テーブルのスクロールを消してしまっているようです。
<body style="min-width:100%;"> <!--ヘッダーエリア開始--> <span id="spn_headder"> <?php require_once './common/inc_header.php'; ?> </span> <!--ヘッダエリアー終了--> <div id="page_t"><img src="img/page_t1.gif" width="500" height="26" alt="備品検索・貸出"/></div> <!--メインエリア開始--> <div id="main"> <form id="frm_src"> <table class="hyou3" name="T1" id="T1"> <tbody> <tr> <div style="margin-left:30px; padding:6px;" class="ken"> <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"/> </div></td> </tr> </tbody> </table> </form> <input name="page" type="hidden" id="page" value="1" /> </div> <hr style="margin:10px 0px" /> <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" /> <div class="hyou2" id="tbldata"></div> </div> <br> <center> <div name="Pagination" id="Pagination" class="pagination"></div> </center> <iframe id="ifm_post" height="0" width="0" src="" ></iframe> </div> <!--メインエリア終了--> <!--フッターエリア開始--> <?php echo file_get_contents('./common/inc_footer.php'); ?> <!--フッターエリア終了--> </body>
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/02/28 20:43
退会済みユーザー
2018/02/28 21:11
2018/02/28 21:12
退会済みユーザー
2018/02/28 22:03
2018/03/01 02:00
退会済みユーザー
2018/03/01 03:43
2018/03/02 09:09
2018/03/06 06:41