テーブルのスクロール位置を調整する方法
- IE限定の環境でテーブルのスクロール位置を調整する方法について教えてください。
- テーブルのヘッダを固定してスクロールバーを右に付け、スクロールの位置を調整したい場合の解決策を教えてください。
- IE 5.5や6などの低いバージョンでも正しく表示される、シンプルな方法でテーブルのスクロール位置を調整する方法を教えてください。
- ベストアンサー
テーブルをスクロールさせるときのスクロールの位置
お世話になります。 IE限定の質問です。 テーブルのヘッダを固定してスクロールバーを右に付けるとします。 ↓例↓ =================================== <html> <head> <style type="text/css"> .FreezHeader { background-color:#ffffff; position:relative; top:expression(this.offsetParent.scrollTop); z-index:10; } </style> </head> <body> <div id="divFrame" style="overflow:auto; position:relative; width:100%; height:100px;"> <table cellspacing="0" cellpadding="0" width="100%" border="1"> <tr class="FreezHeader"><th>あ</th><th>か</th><th>さ</th></tr> <tr><td>い</td><td>き</td><td>し</td></tr> <tr><td>う</td><td>く</td><td>す</td></tr> <tr><td>え</td><td>け</td><td>せ</td></tr> <tr><td>お</td><td>こ</td><td>そ</td></tr> <tr><td>あ</td><td>か</td><td>さ</td></tr> <tr><td>い</td><td>き</td><td>し</td></tr> <tr><td>う</td><td>く</td><td>す</td></tr> <tr><td>え</td><td>け</td><td>せ</td></tr> <tr><td>お</td><td>こ</td><td>そ</td></tr> </table> </div> </body> </html> =================================== 上記のような HTML を書いた場合， 【下の図】↓の「Ａ」のように表示されます。 「Ａ」のようにではなく スクロールバーの位置(TOPの位置)をヘッダの下から開始させたいのです。 できれば 【下の図】↓の「Ｂ」のような感じで それが難しいとした場合， 【下の図】↓の「Ｃ」のような感じです。 このように表示させる方法を教えていただきたく思います。 IEのみで使えれば良いので， 他のブラウザでの見え方は考えなくて良いです。 ただ， IE 5.5 や 6 などなるべく低いバージョンでも見えるようにと なるべく JavaScript の使用は避けて なおかつ，なるべくシンプルな方法が希望です。
- BlurFiltan
- お礼率33% (2/6)
- HTML
- 回答数5
- ありがとう数1
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
結論です。IEでは簡単には無理です。参考サイトは最後に書いておきます。 まず、データの多いtableは、<thead><tfoot><tbody>でマークアップすべきです。これは印刷したとき(ユーザーエージェントがページ媒体であるとき)に、それぞれのページに見出しを表示すべきだからです。先の回答を実際に印刷すると明白です。ページ媒体でスクロールは出来ませんから、overflowにscrollないしautoを指定した場合は、スタイルシートでスクリーン端末のみ適用されるよう記述することは必須です。スタイルシートのデフォルトはall(仕様書ではscreenですが、実装はallになっています。HTML5では allに変更される) 期待のように表示させるためには、本来はtbodyにoverflowを指定すればよいのですが、これはtable要素には使えないことになっています。(IEにはバグあり使えそうに見えます) そのため、スタイルシートでtbodyをblockに変換してやる必要があります。しかしその時点でIEは、tbodyの高さをtrに継承してしまうバグがあります。またスクロールバー自体が表示されません。 IEで期待通りの表らしき形にしたいのなら、table以外でマークアップしてすべての要素table,thead,tfoot,tbody,tr,td,th,col,cilgroup・・をブロックに下からスタイルシートで配置しなおさないとなりません。 当然ですが、スタイルシートを読まないブラウザ(テキストブラウザ、点字端末、読み上げソフト、そしてプリンター)や他の端末、検索エンジンには意味が通じないことになります。 仕方なく、table全体を<div>で囲って、thead部分をfixedで固定する方法も試したのですが、IEのみfixedで位置を決めない場合は影も形も消えうせてしまいます。--もちろん標準ブラウザではきちんと整形されます。 ｛IEのみで使えれば良いので，｝ は、印刷やその他すべてを犠牲にすれば、表の見出しと本体を別のtableにするなど、文書構造を無視したマークアップ・・あるいは、リストなどでマークアップすることになりますが、決してすべきではない邪道になります。 ☆tbodyをscrollさせる方法は下記サイトをご覧ください。 Tableのヘッダ(thead)を固定して、<tbody>内をスクロールさせる方法 » 株式会社ジラフィー(Giraffy) ( http://giraffy.jp/blog/2009/09/11/css/107/ ) 今回は質問ありがとうございます。自分自身よい勉強になりました。ＩＥがクソであることも再確認できたし・(笑)
その他の回答 (4)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
役立ちそうなスタイルなので、個人的にも調べてみました。 ＩＥどのバージョンも、tableに関して致命的なバグがあるため、ウェブ標準(HTML4.01strict+CSS2.1)で作成し、他のブラウザすべてで同じに表示できる当たり前のことが出来ません。(opera,safari,firefox、IE5～10で確認) そのため、(想像したとおり)先に示したようにリストなど他のマークアップをしたものをblockで配置する以外に期待のことはできないと思われます。いまだにウェブデザイナーを悩まし続けるIE---。この世から消えてしまえばよいのに。 下記HTMLは、ウェブ標準です。リストでマークアップしたものとtableでマークアップしたものです。いずれも同じように表示されるべきですが、下のtableでのマークアップは、IEはすべてのバージョンでうまく表示できないのではないかと思います。 結論から言うと、本来はtable、特にthead,tbodyを使ってマークアップすべきででありながら、tableが使えません。theadやtbodyは印刷して２ページに分かれるような大きなtable--スクロールが必要なデータであっても、「tbodyのみスクロールさせることが不可能なのです」--実際に大きなデータの表を作成して印刷してみてください。 ★Another HTML-lint gateway( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★The W3C Markup Validation Service( http://validator.w3.org/#validate_by_input ) でチェック済み <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css" media="screen"> <!-- ol.table,ol.table ul,ol.table li{display:block;padding:0;margin:0;line-height:30px;list-style:none;} ol.table{width:410px;} ol.table li ul li{width:100px;border:solid 1px gray;float:left;} ol.table li{clear:left;} ol.table li ul li{clear:none;} ol.table li.head ul li{text-align:center;font-weight:bold;} ol.table li.body{height:94px;overflow:auto;width:426px;border-bottom:1px gray solid;} ol.table li.body ul li{padding:0 5px;width:90px;} ol.table li.body ul{clear:left;} table.scroll,table.scroll *{display:block;border:solid gray 1px;margin: 0;padding:0;line-height:30px;} table.scroll,table.scroll tr{width:410px;border:none;} table.scroll{margin-top:50px;border-bottom:1px solid gray;} table.scroll thead,table.scroll tbody{width:100%;border:none;} table.scroll tbody{height:94px;overflow:auto;width:428px;} table.scroll thead th,table.scroll tbody td{float:left;width:100px;} table.scroll tbody,table.scroll tbody tr{clear:left;} --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<ol class="table"> ＿＿<li class="head"> ＿＿＿<ul> ＿＿＿＿<li>あ行</li><li>か行</li><li>さ行</li><li>た行</li> ＿＿＿</ul> ＿＿</li> ＿＿<li class="body"> ＿＿＿<ul> ＿＿＿＿<li>あ</li><li>か</li><li>さ</li><li>た</li> ＿＿＿</ul> ＿＿＿<ul> ＿＿＿＿<li>い</li><li>き</li><li>し</li><li>ち</li> ＿＿＿</ul> ＿＿＿<ul> ＿＿＿＿<li>う</li><li>く</li><li>す</li><li>つ</li> ＿＿＿</ul> ＿＿＿<ul> ＿＿＿＿<li>え</li><li>け</li><li>せ</li><li>て</li> ＿＿＿</ul> ＿＿＿<ul> ＿＿＿＿<li>お</li><li>こ</li><li>そ</li><li>と</li> ＿＿＿</ul> ＿＿＿<ul> ＿＿＿＿<li>あ</li><li>か</li><li>さ</li><li>た</li> ＿＿＿</ul> ＿＿＿<ul> ＿＿＿＿<li>い</li><li>き</li><li>し</li><li>ち</li> ＿＿＿</ul> ＿＿＿<ul> ＿＿＿＿<li>う</li><li>く</li><li>す</li><li>つ</li> ＿＿＿</ul> ＿＿＿<ul> ＿＿＿＿<li>え</li><li>け</li><li>せ</li><li>て</li> ＿＿＿</ul> ＿＿＿<ul> ＿＿＿＿<li>お</li><li>こ</li><li>そ</li><li>と</li> ＿＿＿</ul> ＿＿</li> ＿</ol> ＿<table class="scroll" summary="scrollTbody"> ＿＿<thead> ＿＿＿<tr> ＿＿＿＿<th>あ行</th><th>か行</th><th>さ行</th><th>た行</th> ＿＿＿</tr> ＿＿</thead> ＿＿<tbody> ＿＿＿<tr> ＿＿＿＿<td>あ</td><td>か</td><td>さ</td><td>た</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td>い</td><td>き</td><td>し</td><td>ち</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td>う</td><td>く</td><td>す</td><td>つ</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td>え</td><td>け</td><td>せ</td><td>て</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td>お</td><td>こ</td><td>そ</td><td>と</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td>あ</td><td>か</td><td>さ</td><td>た</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td>い</td><td>き</td><td>し</td><td>ち</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td>う</td><td>く</td><td>す</td><td>つ</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td>え</td><td>け</td><td>せ</td><td>て</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td>お</td><td>こ</td><td>そ</td><td>と</td> ＿＿＿</tr> ＿＿</tbody> ＿</table> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
もう一つ データの関連性がなくなるので邪道ですが、ふたつのtableに分けて、それぞれをblockで囲むと言うほうが簡単でしょう。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
table要素にoverflowは使えません。 Applies to: ＿block-level and replaced elements 11.1.1 はみ出した内容の扱い（Overflow: the 'overflow' property） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visufx.html#overflow ) リストでマークアップして、ブロックにしましょう。 ＿<ol class="table"> ＿＿<li class="body"> ＿＿＿<ul> ＿＿＿＿<li>あ</li><li>か</li><li>さ</li><li>た</li> ＿＿＿</ul> ＿＿＿<ul> ＿＿＿＿<li>い</li><li>き</li><li>し</li><li>ち</li> ＿＿＿</ul> ＿＿＿<ul> ＿＿＿＿<li>う</li><li>く</li><li>す</li><li>つ</li> ＿＿＿</ul> ＿＿＿<ul> ＿＿＿＿<li>え</li><li>け</li><li>せ</li><li>て</li> ＿＿＿</ul> ＿＿＿<ul> ＿＿＿＿<li>お</li><li>こ</li><li>そ</li><li>と</li> ＿＿＿</ul> ＿＿</li> ＿＿<li class="head"> ＿＿＿<ul> ＿＿＿＿<li>あ行</li><li>か行</li><li>さ行</li><li>た行</li> ＿＿＿</ul> ＿＿</li> ＿</table>
関連する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
- テーブル内のスクロール
初めて質問いたします。 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
- テーブルデータのスクロール
いつもお世話になっています。 テーブル作成時に、ヘッダ部分のみを固定し、 データ部分をスクロールしたいと思い、調べた結果 <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>部分を実際にスクロール するサンプルソースがみつからず、ここに質問させていただきました。 ご教授お願いいたします。
- ベストアンサー
- HTML
- cssでテーブルの位置を設定するには？
<table border="1" align="left">でテーブルの位置を競ってすることはできたのですが スタイルシートで行いたいです。 そもそも他のテーブルはすべて中央に寄せたいため、 table { margin-left: auto; margin-right: auto; } としています。 そのうえで、任意のテーブルのみ左に寄せて表示したいので table.test { align:left; } としたのですが、うまくいきません。 ---------------------------------------------------------- <html> <head> <title>test</title> <STYLE type="text/css"> table { margin-left: auto; margin-right: auto; width: 40%; } table.test { width: 80%; align:left; } </STYLE> </head> <body> <table border="1"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" align="left"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" class="test"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> </body> </html> ----------------------------------------------------- このコードだと、 table.test { width: 80%; align:left; } の、 width: 80%; の部分は認識されるようですが、align:left;は無視されます。 スタイルシートでテーブルの位置を設定する方法をご教授ください。
- 締切済み
- CSS
- スクロールするテーブルに背景画像を固定させたいのです
ＨＴＭＬでテーブルを作り、スクロールできる仕様にしました。そこに背景画像を入れたのですが、スクロールの際に一緒に背景画像もスクロールしてしまいます。 文字などだけをスクロール可能にして、背景画像を固定にする方法を知っている方は教えてください。 私のソースは下記です。よろしくお願いします。 <html> <TABLE border="0" width="695" background="top-6.GIF"> <TR><TD width="72" height="34"></TD><TD width="623" height="34"><font color="red"><b><center>お知らせ</center></b></font></TD></TR> </TABLE> </DIV> </DIV> <!--本体部分--> <DIV style="overflow-y:scroll;direction:ltr;width:695;height:114px"> <DIV style="direction:ltr"> <TABLE border="0" width="695" background="top-7.GIF" style="background-attachment: fixed"> <TR><TD width="72">A</TD><TD width="623">B</TD></TR> <TR><TD>C</TD><TD>D</TD></TR> <TR><TD>E</TD><TD>F</TD></TR> <TR><TD>G</TD><TD>H</TD></TR> <TR><TD>I</TD><TD>J</TD></TR> <TR><TD>K</TD><TD>L</TD></TR> <TR><TD>M</TD><TD>N</TD></TR> <TR><TD>O</TD><TD>P</TD></TR> </TABLE> <DIV style="overflow-y:scroll;direction:ltr;width:695; scrollbar-base-color:#FFFFFF; scrollbar-track-color:#FFFFFF; scrollbar-face-color:#FFFFFF; scrollbar-shadow-color:#FFFFFF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#FFFFFF; scrollbar-arrow-color:#FFFFFF"> <DIV style="direction:ltr"> </DIV> </DIV> </html>
- ベストアンサー
- レンタルサーバ・ASP
- 入れ子にしたテーブルをheight100%にする
お世話になります。 以下のソースで、table2の高さを100％にしたいです。 この書き方では、firefoxではうまく表示できるのですが、 IEではだめでした。どこがいけないのでしょうか？？ ---------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> <!-- html {height:100%;} body {height:100%;} .th100 {height:100%;} --> </style> </head> <body> <table width="600" border="1" cellpadding="0" cellspacing="0" class="th100"> <tr> <td width="300" rowspan="2"> 長いテキスト </td> <td height="50"><table width="300" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000"> <tr> <td>table1</td> </tr> </table></td> </tr> <tr> <td><table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999" class="th100"> <tr> <td>table2</td> </tr> </table></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- tableタグに右に回り込みの位置
tableタグに右に回り込みを入れたのですが<table align="left"> CSSのでtable全体と回り込みをした文字を上の方に移動させたいのですが これが回り込みをした文字しか移動しなくて困っています。 <div style="position:relative; bottom:20px"> <table border=1 align="left"> <tr> <td>表の内容</td> </tr> </table> 回り込み </div> が例えなのですが、何か打開策など御座いませんか？
- ベストアンサー
- ホームページ作成ソフト
- 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> <head> <title>test</title> </head> <style type="text/css"> table { width: 100%; } </style> <body> <table border=1> <tr><th>a</th><th>b</th></tr> <tr><td>1</td><td>2</td></tr> </table> </body> </html> のように テーブルの幅を１００％にしても 両端に余白が出来てしまいますが この余白をなくすことは可能ですか？ 添付画像はIEで表示させた状態ですが ファイアフォックスなど他のブラウザで表示させても余白が出来ます。
- ベストアンサー
- HTML
- tableの中にtableを作りスクロールさせたい。
tableの中にtableを作りスクロールさせたい。 tableの中にtableを作りスクロールさせたいのですが、書きサンプルで思うようになりません。 table一つなら上手くいくのですが、どこが悪いでしょうか。 <html lang="ja"> <head> <title></title> </head> <body> <table border="1" width="100%"><tr><td></td></tr> <tr> <td > <div style="height:40%;width:100%;overflow-y:scroll;"> <table border=1 width="100%" bgcolor="#9999ff"> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> </table> </div> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
お礼
ORUKA1951 さん， 何度も回答してくださり感謝の気持ちでいっぱいです。 また お礼 が遅れましたことをお詫びいたします。 最初の ANo.1 の回答をくださったときに その先を自力で作成しようと思ってあがいてみたのですが 自力では何ともできず，その日は途方にくれておりました。 ANo.4 の回答を見て 初めてどうするのかがわかった次第でして...。 シンプルな記述でできるものなのですね。 びっくりしました。＆ 助かりました。 私，JavaScript (言語自体) は少々得意ですし， ActionScript は結構得意な方なのですが， HTML とか CSS とかは，本当難しい(じゃじゃ馬ならしみたい)ですね。。。 本当にありがとうございました。