- ベストアンサー
テーブルデータのスクロール
いつもお世話になっています。 テーブル作成時に、ヘッダ部分のみを固定し、 データ部分をスクロールしたいと思い、調べた結果 <thead>、<tbody>、<tfoot> タグ系を使うまでは分かりました。 が、<tbody>部分は、スクロールせずにただ普通に表示されているだけでした。 OKwebで検索し、サンプルを作成してくださった方がいたので 試しにソースをコピーして、ローカルで試してみましたがダメでした。 ↓ちなみにソースです。width や height の値をいろいろ変えたりはしました。↓ <html> <head> <title>TbodyScroll</title> </head> <body> <table border="1" width="200px" height="100px"> <thead> <tr><th>M1</th><th>M2</th><th>M3</th></tr> </thead> <tfoot> </tfoot> <tbody style="width:180px;height:60px;overflow:scroll"> <tr><td>D1-1</td><td>D1-2</td><td>D1-3</td></tr> <tr><td>D2-1</td><td>D2-2</td><td>D2-3</td></tr> <tr><td>D3-1</td><td>D3-2</td><td>D3-3</td></tr> <tr><td>D4-1</td><td>D4-2</td><td>D4-3</td></tr> <tr><td>D5-1</td><td>D5-2</td><td>D5-3</td></tr> <tr><td>D6-1</td><td>D6-2</td><td>D6-3</td></tr> <tr><td>D7-1</td><td>D7-2</td><td>D7-3</td></tr> </tbody> </table> </body> </html> 自分なりに位置を固定して試したり、他のサイトも検索してみましたが、<tbody>部分を実際にスクロール するサンプルソースがみつからず、ここに質問させていただきました。 ご教授お願いいたします。
- guruguru2
- お礼率81% (209/255)
- HTML
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
うーん、後はこんな感じですかね。 theadだった部分とtbodyだった部分を別のテーブルに 分けて、元tbodyはdivの中でスクロールさせてます。 IE、Operaだとこれでスクロールにはなります。 <html> <head> <title>TbodyScroll</title> </head> <body> <table border="1" width="200px" height="100px"> <tr><th>M1</th><th>M2</th><th>M3</th></tr> </table> <div style="width:180px;height:60px;overflow:scroll"> <table border="1" width="200px" height="100px"> <tr><td>D1-1</td><td>D1-2</td><td>D1-3</td></tr> <tr><td>D2-1</td><td>D2-2</td><td>D2-3</td></tr> <tr><td>D3-1</td><td>D3-2</td><td>D3-3</td></tr> <tr><td>D4-1</td><td>D4-2</td><td>D4-3</td></tr> <tr><td>D5-1</td><td>D5-2</td><td>D5-3</td></tr> <tr><td>D6-1</td><td>D6-2</td><td>D6-3</td></tr> <tr><td>D7-1</td><td>D7-2</td><td>D7-3</td></tr> </table> </div> </body> </html> テーブルが繋がっていないのでこのままだと幅などがバラバラに なります。(フレームなどを使っても同じことですが…) ・テーブル、カラムの幅を固定にする ・枠線は細くしておく ・スクロールバーの幅を考慮し、DIVの幅を調整しておく ・divやtableのパディングやマージンを調整する などの調整が必要です。
その他の回答 (4)
- steel_gray
- ベストアンサー率66% (1052/1578)
縦スクロールだけのようですが参考URLにJavascriptを使ったサンプルがあります。 （なんとなく開発途上っぽいですが） cssによるスクロールはgecko系(Netscape,firefox,Mozilla)では動くようですね。
お礼
ありがとうございます。 >cssによるスクロールはgecko系(Netscape,firefox,Mozilla)では動くようですね。 一応、IEでも可能で、CSSで一旦は作成したのですが、 縦スクロールは良かったのですが、横スクロールをしたときに ヘッダ部分も一緒に動かないので、<thead>を検討していました。 OnScrollイベントとかも調べてみようと思います。
- Aquarius172
- ベストアンサー率36% (111/308)
<TBODY>のスクロールに正式対応しているブラウザーは殆どありません。 >>参考 http://www.tohoho-web.com/html/tbody.htm <TABLE>でスクロールを行うには、ちょっと邪道かも知れませんが、<IFRAME>を組み合わせるしかないと思います。 ～～～～～ メイン ～～～～～ <html> <head> <title>TbodyScroll</title> </head> <body> <table border="1" width="200px"> <tr> <th>M1</th> <th>M2</th> <th>M3</th> </tr> <tr height="100px"> <td colspan=3> <iframe src="tdata.html">インラインフレーム対応ブラウザでご覧下さい。</iframe> </td> </tr> </table> </body> </html> ～～～～～ ここまで ～～～～～ ～～～～～ tdata.html ～～～～～ <html> <head> <title>T_Data</title> </head> <body> <table border="1" width="200px"> <tr><td>D1-1</td><td>D1-2</td><td>D1-3</td></tr> <tr><td>D2-1</td><td>D2-2</td><td>D2-3</td></tr> <tr><td>D3-1</td><td>D3-2</td><td>D3-3</td></tr> <tr><td>D4-1</td><td>D4-2</td><td>D4-3</td></tr> <tr><td>D5-1</td><td>D5-2</td><td>D5-3</td></tr> <tr><td>D6-1</td><td>D6-2</td><td>D6-3</td></tr> <tr><td>D7-1</td><td>D7-2</td><td>D7-3</td></tr> </table> </body> </html> ～～～～～ ここまで ～～～～～
- 参考URL：
- http://www.tohoho-web.com/
お礼
回答ありがとうございます。 フレームですか。検討してみます。 ありがとうございます。
- royaltomato
- ベストアンサー率38% (21/55)
↓ごめんなさい、IEは不可ですが、 Mozillaならできるらしいです。未確認ですが。
お礼
再度、回答ありがとうございます。m(_ _)m >Mozilla ですか。ほえ～、初めて聞くブラウザです。 あまり、詳しくなくて…。 調べてみます。(^^)
- royaltomato
- ベストアンサー率38% (21/55)
現行では正式対応のブラウザはないのではないですか？
お礼
回答ありがとうございます。 そうみたいですね…。 ただ、<tbody>タグが出来るってだけ見たいですね(^^;
関連するQ&A
- tableのヘッダを固定したい
IE6,7,8でテーブルのヘッダを固定したいのですが うまくいきません。 条件は以下のとおりです。 ・width: ?%として大きさを可変にする。 ・ヘッダを固定する。 ・ボディにはスクロールバーをつける これまでwidthは固定で作成してきたのですが 可変にする場合どのようなcssにすればよいのでしょうか。 よろしくお願いします。 <div id="container"> <div class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> </tr> </thead> </table> </div> <div class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> </tr> </tbody> </table> </div> </div>
- 締切済み
- HTML
- table 幅指定でtheadとtbodyがずれる
bootstrapを使っているのですが、 個別に幅設定がしたいので、htmlに下記を追加しました。 theadは問題なく幅設定できているのですが、tbodyがうまく適用されていないようで theadとずれてしまいます。 theadとtbodyの幅を合わせるにはどのようにすれば良いでしょうか？ <style type="text/css"> .scroll1 { width: 1600px; table-layout: fixed; } .scroll1 thead, .scroll1 tbody { float: left; } .scroll1 tbody { height: 350px; overflow-y: scroll; } .c1 { table-layout: fixed;width: 200px; } .c2 { table-layout: fixed;width: 100px; } .c3 { table-layout: fixed;width: 100px; } .c4 { table-layout: fixed;width: 200px; } .c5 { table-layout: fixed;width: 200px; } .c6 { table-layout: fixed;width: 200px; } .c7 { table-layout: fixed;width: 100px; } .c8 { table-layout: fixed;width: 250px; } .c9 { table-layout: fixed;width: 250px; } </style> <table class="table table-bordered table-striped"> <tr> <td> <table border="0" class="table table-bordered table-hover table-striped table-hgroup scroll1"> <thead> <tr style=""> <th class="c1">アクション</th> <th class="c2">店舗コード</th> <th class="c3">ユーザID</th> <th class="c4">ユーザパスワード</th> <th class="c5">ユーザ名</th> <th class="c6">メールアドレス</th> <th class="c7">管理権限</th> <th class="c8">更新日</th> <th class="c9">登録日</th> </tr> </thead> <tbody> <tr style=""> <td style="width:200px;table-layout:fixed"> <input type="submit" value="削除" /> <input type="submit" value="編集" /> </td> <td style="width:100px;table-layout:fixed"> <span >2697</span> </td> <td style="width:100px;table-layout:fixed"> <span >002</span> </td> <td style="width:200px;table-layout:fixed"> <span >000000</span> </td> <td style="width:200px;table-layout:fixed"> <span >大築</span> </td> <td style="width:100px;table-layout:fixed"> <span ></span> </td> <td style="width:100px;table-layout:fixed"> <span >0</span> </td> <td style="width:250px;table-layout:fixed"> <span >2014/11/08 21:20:39</span> </td> <td style="width:250px;table-layout:fixed"> <span >2014/11/08 21:20:48</span> </td> </tr> </tbody> </table> </td> </tr> </table>
- ベストアンサー
- CSS
- CSS+HTMLでTBODYスクロールさせたい
「複数行の見出し行（THEAD）で複数行のデータ行（TBODY）をスクロールさせたい」 こんにちわ、HTML+CSSでご質問させていただきます。 ターゲットは、IE7、IE8、IE9です。 http://javascript123.seesaa.net/article/303954410.html を参考に、見出し行固定、のデータスクロールテーブルを cssを使って実現しようと思ってます。 上記URLのサンプルソースをそのままコピーして、 HTMLとして動かすと期待どおりの動きをいたします。 そのサンプルソースの見出し行を複数行にしたく、 以下のように修正いたしましたが、 見出し行２行のうちの１行分しか表示されません。 下記の様になります。 http://apooz.obata.tk/test.html 変更した箇所はtbodyの開始位置をヘッダーの高さ倍にしたかったので、 out_Div内のpadding-topを修正。 あとは、”調査時期”というカラムをTHEADとTBODYに増やしました。 <tr> <th class="coL0" colspan="5">調査時期</th> </tr> 試行錯誤いろいろしましたが、着眼点が悪かったのか、 スキル不足も手伝って、時間ばかり消化しております。 何かヒントなる情報いただけると幸いです。 宜しくお願い致します。 ------------------ソース ここから------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>CSS でヘッダ固定、データ行を スクロールさせるテーブル。</title> <style type="text/css"> <!-- #sclTbl { /* スクロール対象のテーブル */ background-color: #fff; /* テーブルの背景色 borderの色になる */ border-collapse:separate; /* 枠線の表示の仕方 */ font-size: 16px;/* 文字のサイズ */ } #out_Div { /* 全体の枠。ここにヘッダを格納 */ position: relative; /* 相対位置 */ padding-top: 52px; /* #in_Div の開始位置 */ width: 480px; /* 列幅の合計＋セル間の幅(2px)の合計＋20px 程度 */ border: 1px solid #0099cc; /* 外枠 */ background-color: #fff; /* 白 */ } #in_Div {/* tbodyが入っている。ここがスクロール対象*/ overflow: auto; /* スクロールバー*/ height: 133px; /* tbodyを表示する高さ */ } #sclTbl thead tr {/* ヘッダ 見出し行,位置を #out_Div の左上端に移動 */ position: absolute; /* 絶対位置 */ top: 0px; /* 上からの位置 */ left: 0px; /* 左からの位置 */ background-color: #fff; } #sclTbl thead tr th{/* thead 'th'のスタイル */ background-color: #0099cc; /* 背景色 */ color: #fff; /* 文字色 */ padding: 3px 0px; } #sclTbl tbody tr td{/* tbody 'td'のスタイル */ background-color: #dcdcdd; color: blue; padding: 3px 6px; } .coL0 { width: 30px; }/* colgroupの列幅指定 */ .coL1 { width: 100px; } .coL2 { width: 120px; } --> </style> </head> <body> <div id="out_Div"> <div id="in_Div"> <table id="sclTbl"> <!--colgroup tableの列をグループ化し、列幅指定--> <colgroup class="coL0"></colgroup> <colgroup class="coL1"></colgroup> <colgroup class="coL2"></colgroup> <colgroup class="coL1" span="2"></colgroup> <colgroup class="coL3"></colgroup> <thead> <tr> <th class="coL0" colspan="5">調査時期</th> </tr> <tr> <th class="coL0">Ｎo</th> <th class="coL1">都道府県</th> <th class="coL2">県庁所在地</th> <th class="coL1">人口</th> <th class="coL1">面積（ｋm2)</th> </tr> </thead> <tbody> <tr> <td align="center" colspan="5">2011年</td> </tr> <tr> <td>1</td> <td>北海道</td> <td>札幌市</td> <td>5,517,449</td> <td>78,420.61</td> </tr> ： （中略） ： <tr> <td align="center" colspan="5">2011年</td> </tr> <tr> <td>10</td> <td>群馬県</td> <td>前橋市</td> <td>2,006,903</td> <td>6,363.16</td> </tr> </tbody> </table> </div> </div> </body> </html> ------------------ソースここまで------------------ 大変困ってます。助けてください。m(_ _)m
- 締切済み
- HTML
- テーブル内のスクロール
初めて質問いたします。 HTML構文をきちんと理解しないまま、サイトをつくってしまっていますが、ひとつ困っていることがあります。テーブルの中のひとつのセルの高さサイズを固定してその中につくったテーブルを縦にスクロールさせています。winではうまく表示できるのですが、mac環境の人からスクロールしないと言われました。ブラウザはIE5と聞いています。以下のような構文にしていますが、なにか間違えているのでしょうか？どなたか教えていただけると助かります。よろしくお願いいたします。 <table width="620" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF"height="500"> <tr> <td height="60" valign="top"> </td> </tr> <tr> <td> <div align="center"> <div style="height:400px;width:600px;overflow-y:scroll;"> <table width="600" border="0" cellspacing="0" cellpadding="0"> </table> </div> </div> </td> </tr> </table>
- ベストアンサー
- HTML
- 表の作成
いつもお世話になっています。 下記の構文で表を作成した際に、セルの幅がずれてしまいます。 <TABLE border="1" cellspacing="0" width="940"> <TBODY> <TR> <TH height="17" width="790" colspan="5">A</TH> <TH height="17" width="75" rowspan="2">G</TH> <TH height="17" width="75" rowspan="2">H</TH> </TR> <TR> <TH height="17" width="150">B</TH> <TH height="17" width="80" >C</TH> <TH height="17" width="220">D</TH> <TH height="17" width="280">E</TH> <TH height="17" width="60" >F</TH> </TR> </TBODY> </TABLE> <TABLE border="1" cellspacing="0" width="940"> <COLGROUP> <col width="150"> <col width="80" > <col width="220"> <col width="280"> <col width="60" > <col width="75" > <col width="75" > </COLGROUP> <TBODY> <TR height="30"> <TD><FONT SIZE="-1">○</FONT></TD> <TD><FONT SIZE="-1">×</FONT></TD> <TD><FONT SIZE="-1">△</FONT></TD> <TD><FONT SIZE="-1">□</FONT></TD> <TD><FONT SIZE="-1">◆</FONT></TD> <TD align="center"> <INPUT type="button" value="◎" style="width:55px;height:27px" onClick=""> <!-- ж --> </TD> <TD align="center"> <INPUT type="button" value="Δ" style="width:55px;height:27px" onClick=""> <!-- ☆ --> </TD> </TR> </TBODY> </TABLE> どなたか解決方法を教えていただけないでしょうか？ よろしくお願いいたします。
- ベストアンサー
- HTML
- css テーブルについて
よろしくお願いします。 2だけを300pxと100pxに2分割にできないでしょうか。 <div class="aa"> <table> <tr> <th>1</th> <td>2</td> </tr> <tr> <th>1</th> <td>1</td> </tr> </table> </div> .aa table { width: 500px; height: 100px; border: 1px #000000 solid; border-collapse: collapse; } .aa th { width: 100px; border: 1px #000000 solid; } .aa td { width: 400px; border: 1px #000000 solid; }
- ベストアンサー
- CSS
- 2つのテーブルの幅を一致させたい
以下のHTMLで、2つのテーブルのセル幅が一致しません。 JavaScriptではヘッダのセル幅をボディのセル幅に合わせています。 ボディ部分の文字列をすべて日本語にするとうまくいくのですが・・・ JavaScriptというよりはHtmlの問題な気がしますが、よろしくお願いします。 jqueryを使用しています。 <html> <head> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { headerTableWidthFit(); }); $( window ).resize(function(){ headerTableWidthFit(); }); function headerTableWidthFit() { var i = 0; $('#resultBodyTable table tbody tr:eq(0) td').each(function() { $('#resultHeaderTable table th').eq(i).width($(this).width()); i++; }); } </script> </head> <body> <div id="container"> <div id="resultHeaderTable" class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> <th>お</th> <th>か</th> <th>き</th> <th>く</th> </tr> </thead> </table> </div> <div id="resultBodyTable" class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> <td>お</td> <td>か</td> <td>き</td> <td>く</td> </tr> </tbody> </table> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- ブラウザによってテーブルのセルの高さが変わる
質問させて頂きます。 現在、テーブルを使用して表を作っているのですが、 ブラウザによってセルの高さが変わってしまいます。 safariでは思った通りのレイアウトになるのですが、 chrome、Firefoxでは [ height ] の値が反映されていないのか、 崩れてしまいます。 添付は希望するレイアウト（safariではこのように表示されます）です。 ソースを記載しますので、どなたかご教示お願い致します。 --- html --- <table class="hogs" cellspacing="5"> <tr> <td width="180" height="184" rowspan="3"><img src="img/001.gif" width="180" height="184" alt=""/></td> <th height="22">項目１</th> <td>文章１</td> </tr> <tr> <th height="22">項目２</th><td height="22">文章２</td> </tr> <tr> <th height="140" valign="top">項目３</th><td valign="top">文章３</td> </tr> </table> --- CSS --- table.hoge { background-color: rgba(50,50,50,0.3); width: 640px; height: 184px; margin: 0 auto 18px; padding: 10px; } table.hoge th { height: 22px; background-color: #7ac0c9; width: 80px; } table.hoge td { padding: 0 20px; }
- ベストアンサー
- HTML
- dataTablesのテーブルの内容がずれる
3ステップで表をソート＆値を検索できるjavascript「dataTables」 http://www.skuare.net/test/jdatatables.html 上記サイトのjavascriptを使いソートで並べ替えることはできましたが、 <thead> <tr> (1) <th>Rendering engine</th> (2) <th>Browser</th> (3) <th>Platform(s)</th> (4) <th>Engine version</th> (5) <th>CSS grade</th> </tr> </thead> <tbody> <tr class="oddA"> (1) <td>Gecko</td> (2) <td>Firefox 1.0</td> (3) <td>Win 98+ / OSX.2+</td> (4) <td class="center">1.7</td> (5) <td class="center">A</td> </tr> （略）※trがtbodyに10個ほど入ります </tbody> <thead>の見出し部分の番号が <tbody>部分の番号と同じ並びになるはずなのですが、 (1)(2)(3)(4)(5)ではなく、 (4)(3)(2)(1)(5)となってしまいます。 http://sprymedia.co.uk/dataTables/example_alt_pagination.html ↑は上記解説サイトの元々のサイトなのですが、 こちらのhtmlのソースの<tbody>部分の<td>も(1)～(5)と順番に記述されています。 これだけでは情報不足とは思いますが、 ここを変えたら直るかもしれないなどありましたら教えていただけないでしょうか。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- テーブルについて
二つスライドが重なったようなテーブルを作りたいんですけど、一応、下記はそのように表示されたのですが、見え方で言うと、スライドの一枚目に文字を入れると、二枚目のスライドの形がずれてしまうのですがどうすればいいでしょう？ <TABLE width="636" cellspacing="0"> <TBODY> <TR> <TD bgcolor="#0080ff" colspan="3" rowspan="2"></TD> <TD width="20" height="20"></TD> </TR> <TR> <TD bgcolor="#97cbff" width="20"></TD> </TR> <TR> <TD height="20" width="20"></TD> <TD bgcolor="#97cbff" colspan="2" width="596"></TD> <TD bgcolor="#97cbff" width="20" height="20"></TD> </TR> </TBODY> </TABLE>
- ベストアンサー
- HTML
お礼
ありがとうございます。 いろいろなやり方があるので、検討してみます。