質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

3回答

1607閲覧

テーブルをスクロールする方法

hw_test

総合スコア13

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

1クリップ

投稿2018/02/28 02:46

編集2018/03/13 00:22

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;">&nbsp;</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") ? "〇" : "&nbsp;")."</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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

即興でつくってあるので多少のずれはうまく調整してねだけど

縦scrollのみ

https://jsfiddle.net/kavzoe6u/ に動作サンプルを置いておく

幅広いレイアウトに対応

https://jsfiddle.net/kavzoe6u/10/

エリア限定版(DIV内)

https://jsfiddle.net/kavzoe6u/22/

スリム化

https://jsfiddle.net/kavzoe6u/41/

投稿2018/02/28 12:55

編集2018/02/28 21:59
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/02/28 20:43

phpと合わせて対応するってところでかなり苦労されてるみたいなんですよね・・・
退会済みユーザー

退会済みユーザー

2018/02/28 21:11

ああ なんで CSSとJSだけで対応しているんでPHPではテーブルを普通に作成するだけですよ
m.ts10806

2018/02/28 21:12

たぶん、質問者さんはかなりつまずいています(私の回答もまだあまり理解できてない感じがします)
退会済みユーザー

退会済みユーザー

2018/02/28 22:03

TBODY のoverflow ってIE/EDGE て対応してくれてたかが疑問が残る・w・
hw_test

2018/03/01 02:00

回答ありがとうございます。 なんとか固定する方法は教えていただき理解してきたのですが、 既存ソースをどう対応していけば実現できるかというところで悩んでいます。 知識不足なのでみなさんに迷惑おかけしていますが、 こちらでも教えていただいたサイト等を参考にして引き続き修正してみます。
退会済みユーザー

退会済みユーザー

2018/03/01 03:43

一応 [PHPでテーブル作成]と[CSS/JS によるレイアウト変更] を完全に分割してありますよ
hw_test

2018/03/02 09:09

ありがとうございます。 わたしがこちらに提示している情報はテーブルの情報だけだったのですが、 それだと確かに皆さんが考えてくれた案で固定されました。 しかし、実際にそのテーブルを呼んでいる部分から表示するとスクロールが 消えてしまいます。 追記いたしましたが、その部分に問題があり麻生ですので調べてみます。
hw_test

2018/03/06 06:41

asahina1979さんが言うように、今回の対処法ではIEでは動作しないことがわかりました。 ほかの方法を調査しております。
guest

0

ベストアンサー

見た目をどうするか、なのでPHPというよりもjavascript,css案件ですね。
あくまでテーブルはPHPで作成されているわけではなく、PHPで出力されたHTMLによって作成されているので。

「ヘッダー固定テーブル」で検索すると自作、プラグイン 色々でてきますので参考にしてみてください。

追記を受けて

サーバー側の言語の出力とあわせて作る場合、いきなり全てやろうとしてはどこかで辻褄が合わなくなって逃げたくなります(私も経験があります)

なので、下記のような手順を踏みます。

  1. 出力結果のHTMLをテスト的な中身で作り上げる
  2. それぞれを1個ずつ当てはめていき、調整する

1が結構大事です。まずはモック(試作品)で完成品へのイメージを持つことです。
そのあとに当てはめていき、モックと同じような構成で出力できているかを確認します。

  1. 出力結果のHTMLをテスト的な中身で作り上げる

※ヘッダーが30以上とのことですが、増やせばいいだけですので、ひとまず最少構成で組んでいます。

html

1<table id="tbl_list"> 2 <thead> 3 <tr> 4 <th scope="col" class="maker_name">メーカー名</th> 5 <th scope="col" class="serial_no">シリアルNo</th> 6 </tr> 7 </thead> 8 <tbody> 9 <tr> 10 <td class="maker_name">aaaa</td> 11 <td class="serial_no">bbbb</td> 12 </tr> 13 <tr> 14 <td class="maker_name">aaaa</td> 15 <td class="serial_no">bbbb</td> 16 </tr> 17 <tr> 18 <td class="maker_name">aaaa</td> 19 <td class="serial_no">bbbb</td> 20 </tr> 21 </tbody> 22</table>

提示のサイトでいえば、最初のパターンになると思います。
cssは下記のように組んでみました。

css

1table#tbl_list th.maker_name,table#tbl_list td.maker_name{ 2width:70px; 3} 4table#tbl_list th.serial_no,table#tbl_list td.serial_no{ 5width:100px; 6} 7table#tbl_list thead, tbody { 8 display: block; 9} 10table#tbl_list tbody { 11 overflow-x: hidden; 12 overflow-y: scroll; 13 height: 220px; 14}

最初に提示された情報がヘッダー2つ?だったため、1つ1つにCSSクラスをつけていますが、
面倒であれば提示サイトのようにth,tdを一気に全て指定してしまっても構いません。
※ヘッダとそれに付随するセルの幅が同じであればおそらく問題ないです。
tbodyに指定したheightも好みにあわせて変更してください。

私の方はGoogleChrome最新にて動作確認しました。

  1. それぞれを1個ずつ当てはめていき、調整する

CSSは変更不要です。html部分と、PHPに書かれているHTML部分の調整となります。

※同等の情報が用意できているわけではないのでほぼ未検証です。
--javascript変更なし

html

1<div class="hyou2" id="tbldata"></div>

スクロールをテーブル自身に入れるので外しています。

php

1//ヘッダー部 2$strHTML = '<table id="tbl_list"> 3 <thead> 4 <tr> 5 <th scope="col" class="f-weight maker_name">メーカー名</th> 6 <th scope="col" class="f-weight serial_no">シリアルNo</th> 7.....省略 8 </tr> 9</thead> 10'; 11 12 13$strHTML .= "<tbody>"; 14if ($datanum > 0) { 15 16 while ($CN->EOF() == true) { 17 18 //データ部 19 $strHTML .= "<tr ".$bgcolor."> 20 <td class='break maker_name'>"._hs($CN->GetFieldData('maker_name'))."</td> 21 <td class='break serial_no'>"._hs($CN->GetFieldData('maker_serial'))."</td> 22.....省略 23 </tr>"; 24 25 $CN->MoveNext(); 26 27 } 28 29} else { 30 $strHTML .= "<tr><td colspan='28'>該当するデータがありません。</td></tr>"; 31} 32 33$strHTML .= "</tbody> 34 </table>";

f-weight、breakなどとりあえずそのままにしていますが、何かしら指定されていてヘッダ固定に影響あるようであれば削除するなど調整してください。

投稿2018/02/28 02:52

編集2018/02/28 05:54
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hw_test

2018/02/28 03:47

回答ありがとうございます。 さまざまなサイトを見ると方法はたくさんあるのは理解しているのですが、 上記のソースを流用する場合はどのような方法が一番よいでしょうか?
m.ts10806

2018/02/28 04:02

いずれにしても「出力されたHTMLに対して装飾を行う」こととなります。 PHPはまずは度外視して、PHPで出力されたHTMLソースを抜き出し、 その生HTMLに対してヘッダー固定テーブルの実装をして、 できたら反映、というのが良いと思います。 反映するにしても必要なcssクラスとかjavascriptのソースとかを追加するだけになるとは思いますが。
hw_test

2018/02/28 04:19

そうなのですね。 ichiran.phpの以下の部分でテーブル全体をスクロースしているのですが、この部分かほかの部分をどうにか修正してヘッダーだけを固定にするということはできないでしょうか? </div> <div class="hyou2" id="tbldata" style="width:1168px;height:220px;overflow:scroll;"> </div>
m.ts10806

2018/02/28 04:40

えっと、回答に書いた”「ヘッダー固定テーブル」で検索する”はしてみましたか? その内容如何で変わってきます。 ただ基本はdivではなく出来上がったtableに対して何かしら対応することになりますが。 (好みや実現したい要件によりそのdivに指定している幾つかのstyleは不要となると思います)
m.ts10806

2018/02/28 04:50

もし”「ヘッダー固定テーブル」で検索する”をした結果、使ってみようと思っている手法・プラグインなどありましたら質問を編集して追記してください。
hw_test

2018/02/28 05:15

検索してみました。 しかし、このソースとそのサイトで作りが違うのでどうやって実現したらよいかわかりませんでした。 これを実装したいというものがありましたので、質問に追記いたします。
m.ts10806

2018/02/28 05:25

確認しました。テーブルが複雑になったり大きくなるともしかしたら対応できなくなるかもしれないやり方ですね。 一応、提示のやり方で考えてみます。
hw_test

2018/02/28 05:34

はい。 よろしくお願いします。 ヘッダー部は実際はメーカー名とシリアルNo以外にも30以上あり、1画面に収まらないのでoverflow:scrollでスクロールするようにしていました。
m.ts10806

2018/02/28 05:38

なるほど。どうりでcolspanが28だったりするわけですね。
hw_test

2018/02/28 07:37

修正について詳細を記載いただきありがとうございます。 参考にして対応しています。 しかし、どこか私が間違っているのかうまくいきません。 私は、教えていただいたCSSの内容をtest.cssというファイルに記載し、 ichiran.phpの<div class="hyou2" id="tbldata"></div>の下に <link rel="stylesheet" href="css/test.css" />と記載し呼び出しています。 すると、スクロールが表示されませんでした。 cssの呼び方が間違っているのでしょうか?
m.ts10806

2018/02/28 07:59

できればcssは<head>~</head>の中の方が良いですね。 cssのファイルパスは合っていますか?(URL直打ちで表示されるか、「ソースを表示」からリンククリックで中身が表示されるか) ソースコードも修正されたことと思いますので、現在の最新のコードを質問本文に追加いただけますか?
m.ts10806

2018/02/28 08:05

念のため、 「1.出力結果のHTMLをテスト的な中身で作り上げる」 で示したHTMLと同じ構成でHTMLが出力されているかもご確認ください。
hw_test

2018/02/28 08:39

わかりました。 現在なんとかならないか試行錯誤中ですが、 修正したソースについて追記いたします。 test.cssをいじると表示もかわるのでcssのファイルパスはあっているようです。
m.ts10806

2018/02/28 12:26 編集

php部分が私が書いたようになっていませんが、、、、 というか、最初のものと変わってませんが・・・
hw_test

2018/02/28 23:54

そうですね。 貼り付けるものを間違ったかもしれません。 PCを立ち上げてソースを確認します。
m.ts10806

2018/03/01 00:00

念のため、動作確認されているブラウザ、PHPのバージョンなど環境情報も追記願います。
hw_test

2018/03/01 00:05

IEでPHPは5.3.0になります。EDGEでも動作確認する予定です。
m.ts10806

2018/03/01 00:07

お手数ですが環境情報は質問に追記してください。 こちらのコメントでは他の回答者の目につきにくいです。
hw_test

2018/03/01 00:14

わかりました。 追記しておきます。
hw_test

2018/03/01 01:56

すみません。 やはり修正が不足しておりました。 修正をおこなっていたのですが、これまで質問していたメーカー名、シリアルNo以外についてどう今回の対応をしたらよいか詰まってしまいましたので、追記しましたので修正方法について確認していただけませんでしょうか。
m.ts10806

2018/03/01 02:05

ソースコードはコードブロックで囲ってください(直だとかなり見づらくなってしまいます) ヘッダ部分とbody部分だけ抜粋されてますが、なるべく全体が分かるようにしたほうが良いです。 必要な部分が含まれていないと本当にできているかどうか、わかりません。 気になる点は、「全て一気に片付けようとしている」ということでしょうか。 alignとかwidthとか他のcss(break?とか) 装飾部分なのでまずはヘッダ固定という大目的だけ完成させて、あとで調整しましょう。 私の回答のサンプルもほとんど外していたはずです。
hw_test

2018/03/01 02:11

見にくくなってしまっておりすみません。 修正しました。 わかりました。装飾部分はまずは省いてから作ってみます。
m.ts10806

2018/03/01 02:15

あれ? データ部ってwhileループで作ってませんでしたっけ・・
m.ts10806

2018/03/01 02:15

ある程度整理できたら現在の状態のスクリーンショットなど添付いただけますか? 同じデータがこちらはないので全く同じものが再現できるわけではありませんので。
hw_test

2018/03/01 02:21

データ部はwhileループしております。 修正方法につまってしまったデータを見ていただこうと思い、データを記載いたしました。 処理をはぶいてしまったおりすみません。 整理でき次第スクリーンショットを添付いたします。
m.ts10806

2018/03/01 02:40

まずはclass,style,alignは一通り除きましょう。 それであとは正しくロジックができあがっていれば ご自身で提示された「ヘッダを固定してスクロールする」記事の「またtheadとtbodyをブロック要素とすると、セルの内容によっては幅が合わなくなるため、」のサンプル結果のような形になるはずです。 あとはthとtdに対して幅を調整するだけになるはずです。
hw_test

2018/03/02 08:53 編集

いただいた情報でなんとか実現させようと頑張ってみたのですが、うまくいきませんでした。 現状わかったことがあり、わたしがここで提示している情報だけで皆さんの案だとしたいことが実現できる。 しかし、私の実際のソースには、ここで提示したソース以外のものが少しあるので、それが影響しているようです。 それはおそらく以下です。ここでそのテーブルを表示しています。 <div class="hyou2" id="tbldata"></div> </div> 皆さんから教えていただいたようにヘッダー部とデータ部とCSSだけではうまくいきますが、実際テーブルを表示するところは上記の<div class="hyou2" id="tbldata"></div>なので、 このような表示のしかたで表示する場合はほかに何か必要なのではと考えていますが、なにか心当たりはありませんでしょうか?
hw_test

2018/03/02 09:06 編集

おそらく上記のコメントだけではわからないと思うので、 追記でその周辺の処理を記載いたします。 追記するソースの27行目で今回のテーブルを表示しております。 おそらくこの呼び方のせいでテーブルのスクロールが表示されないのだと思います。
hw_test

2018/03/06 06:40

上記にスクロールが表示されないと書きましたが、原因がわかりました。 どうも、IEだとここで教えていただいた内容が反映されないようです。 chromeだとスクロールが表示されました。 asahina1979さんが言うように、TBODY のoverflowはIE/EDGE にうまく対応できないようです。 この場合、何かよい方法はありますでしょうか?
m.ts10806

2018/03/06 06:48

新しい質問を立てられたなら既に解決済みのこちらにコメントするのではなく、あちらで。
hw_test

2018/03/06 06:56

わかりました。 あちらにもIEのためうまくいかない旨を記載しておきます。
guest

0

動くサンプル:https://jsfiddle.net/h9ehqw55/


提示されたPHPをてきとうに並べて表示されることが確認できました。
関数部分で出力されたHTMLで構文がおかしくなっていたりしませんか?Firefoxなら「ページのソースを表示(Ctrl+U)」でHTML構文エラーが赤く表示されるので、確認してみてください。


HTML部分について指摘がいくつかあります。
0. align属性は廃止されました。→ CSSのtext-alignで処理
0. bgcolor 属性は非標準です。→ CSSのbackground-colorで処理
0. id='btn_kousei_hisotry' 等、whileでループした場合同一ページに複数同じidが存在することになり、HTMLの仕様から考えて問題です。classに置きなおしましょう。
0. kiki_id属性はHTMLの仕様にありません。独自属性を使う場合はカスタムデータ属性を使用しましょう。(例:data-kiki-id

【td 要素 - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/td

【data-* - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/data-*

投稿2018/03/01 04:58

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hw_test

2018/03/02 09:07

ありがとうございます。 テーブルのスクロール自体はこれで大丈夫そうですが、 このテーブルを読んでいる部分に問題があり スクロールが表示されない状態となっているようです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問