tableタグをdisplay:blockで表示する方法とは？
- webdesigning雑誌の12月号で紹介されたCSSを使用した棒グラフの実現方法について、tableタグをdisplay:blockで表示する方法が紹介されています。
- position: relativeやabsoluteを使用して位置を移動させる際には、display:blockが必要です。
- しかし、display:blockを削除しても表示には変化はありません。なぜなら、tableを使用した棒グラフの実現には他の要素が関与しているためです。
- ベストアンサー
tableタグをdisplay:blockで表示
webdesigningという雑誌の12月号でcssで棒グラフを実現させるという話題のなかで、tableタグをcssでdisplay:blockを使って表示（デザイン）しています。trタグも同じようにdisplay:blockを使って表示しているのですがposition: relativeやabsoluteも同時に使って位置を移動しています。positionを使って位置をしていするのにdisplay:blockは必要なんでしょうか？cssファイルでdisplay:blockを削除しても表示には変化はありませんでした。ちなみにtableを使って棒グラフを実現するという内容です。 わかる方教えてください宜しくお願いいたします。
- takachinon
- お礼率47% (9/19)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
しまった。もしかしてそれは 横に伸びる 棒グラフだったでしょうか・・ 書いてみてる途中で気づきました。。 そうだとすれば、ブラウザでinline化 されてしまうのを blockで指定してあげることで ブラウザによる微妙なずれを直してるのだと思います。 縦に伸びるグラフで見ましたが、 display:block 指定すると 当たり前ですが、 firefox 点になりました。(私の書き方の問題かもしれませんが・・) <html><head> <script type="text/javascript"> bars=6; //棒の本数 </script> <style type="text/css"> /*棒の本数分だけ20pxずらして表示*/ .wrap_1{left:10px;} .wrap_2{left:30px;} .wrap_3{left:50px;} .wrap_4{left:70px;} .wrap_5{left:90px;} .wrap_6{left:110px;} /*棒グラフのデータ*/ .a_1{height:70%;} .a_2{height:30%;} .a_3{height:25%;} .a_4{height:32%;} .a_5{height:42%;} .a_6{height:80%;} .field{margin:0;padding:0;background:#000;position:relative;width:130px;height:110px;} .field table{position:absolute;top:5px;width:10px;height:100px;} .field td{background:lime;} .field td.space{background:#00f;} .line td{background:transparent;} /*棒の本数によってwidthを変更*/ table.line{ margin:0;padding:0; position:absolute; top:5px; left:5px; width:120px; height:100px; border:none;border-bottom:1px solid #ccc;border-left:1px solid #ccc; } </style> </head><body> table棒グラフ <div class="field"> <script type="text/javascript"> for(i=1;i<=bars;i++){ htmltag="<table class=\"wrap_"+i+"\">"; htmltag+="<tr><td class=\"space\"></td></tr>"; htmltag+="<tr><td class=\"a_"+i+"\"></td></tr>"; htmltag+="</table>"; document.write(htmltag); } </script> <table class="line"><tr><td></td></tr></table> </div> </body></html>
その他の回答 (1)
- noris02
- ベストアンサー率74% (56/75)
記事は見ておりませんが、 table background: 色 などで 棒グラフの 棒を表現しているのでしょうか。 データ固定 ならば cssだけで いけそうですが、 データが変わるのであれば javascript もいれて 変化させていくのもいいかもしれませんね。 どんな感じか、コード書いて見ます(使えるかどうかは別として。) display:block は もしかしたら、ブラウザによって 予期せぬ表示になってしまうのを 防いでいるのかもしれません。 IE4-7 IE8 firefox opera あたりで 見比べてみるのもいいかもしれませんね。
関連するQ&A
- tableタグに右に回り込みの位置
tableタグに右に回り込みを入れたのですが<table align="left"> CSSのでtable全体と回り込みをした文字を上の方に移動させたいのですが これが回り込みをした文字しか移動しなくて困っています。 <div style="position:relative; bottom:20px"> <table border=1 align="left"> <tr> <td>表の内容</td> </tr> </table> 回り込み </div> が例えなのですが、何か打開策など御座いませんか？
- ベストアンサー
- ホームページ作成ソフト
- テーブル内a:hoverでちらつく[html]
テーブルにテキストを書き、そのテーブルにマウスが当たったらテキストの文字位置をずらすという方法でホームページを作っているのですが、テーブル内をマウス移動させると、文字がちらついてしまいうまくいきません。 ソースは以下です。 <HEAD> <style type="text/css"> <!-- .box a{display:block;} .box a:hover {position: relative; top: 5px; left: 5px;} --> </style> </HEAD> <BODY> <table> <tr> <td class="box"><A href="#">テスト1</A></td> </tr> </table> </BODY> 何が間違えているのかわからず困っています。 ご回答お待ちしております。お願いします。
- 締切済み
- ホームページ作成ソフト
- 画像をかさねて表示させるには？
初めて質問させていただきます。ＨＰを手打ちで一から作っています。デザイン上の理由からどうしても画像の上に画像を重ねる必要があり、relative,absoluteを駆使し、なんとかできたものの、それがFireｆoxではうまく表示されない事を知りました。色々検索すると、table内ではＦｉｒｅｆｏｘの場合、relativeが働かないとあり、愕然としました。しかし、下記のソースでは画像２の位置も思いどうりに配置できるのですが、肝心な製作中のＨＰ上では画像２がtableから飛び出してしまいます。ＨＰはがちがちのtableでレイアウトしており、できれば、今更floatなど使って構造を崩したくありませんし、さらに細かなtableも組みたくありません。検索するとうまく解決できた方もおられる様だったのですが、ヒントだけで私の頭では解決できませんでした。画期的な方法があればよろしくお願いしたいと思います。 <html> <head> <style type="text/css"> .side-box { position:relative; background-repeat:no-repeat; } .side-box2 { position:absolute; top:12px; left:12px; } </style> </head> <body> <table border="1"> <tr> <td> <div class="side-box"> <img src="画像１"> <span class="side-box2"> <img src="画像２"> </span> </div></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- aタグ 中央寄せ
こんにちは aタグのの内容を上下左右の中央に寄せたいのですが、 どのようにすればよいでしょうか？ html-------------- <div class="specialEdition"> <a href="#">LINK</a> </div> css--------------- #leftcolumn .specialEdition { position:relative; width:180px; height:100px; background:url(images/left01.png) no-repeat; cursor:pointer;} #leftcolumn .specialEdition a{ display:block; width:100%; height:100%; position:absolute; left:0; top:0;}
- 締切済み
- CSS
- ie7,8でのtdタグ(inline-block)
下記のhtmlで表示されるのは 縦4×横4のテーブルになります。 <table> <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr> <tr><td>5</td><td>6</td><td>7</td><td>8</td></tr> <tr><td>9</td><td>10</td><td>11</td><td>12</td></tr> <tr><td>13</td><td>14</td><td>15</td><td>16</td></tr> </table> このhtmlを変えずに縦16×横1に変更するcssを作成しています。 今の所cssは <style> table td{ width:50px; display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; } </style> この様に記載しています。 この場合だとchromeとfirefoxでは「縦16×横1」で表示されます。 ただIE7,8だと「縦4×横4」で表示されてしまいます。 どなたかIE7,8に対応できるcssが分かる方いませんでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- operaだとテーブルがなくなります
operaだテーブルがなくなります IEだと問題なく表示されるのに だれか助けてください style.css body{background-color:#ffff99;margin:0px; font-size:large; font-family:"HG正楷書体-PRO","HG行書体","HGP行書体",cursive} .cur{font-family:cursive} .ser{font-family:serif} } table{background-color:#ff9933; width:100%; height:10% } .midori{background-color:#999933; width:100%; height:3.3% } ｈｔｍｌのほうは <HTML> <HEAD> <TITLE></TITLE> <link href="style.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <table><tr ><td></td></tr></table> <table class="midori"> <tr ><td></td></tr></table> <table style="height:6.7%"> <tr ><td></td></tr></table> <table style="position:absolute; left: 0px; bottom:8%; width:8%; height:100%; background-color:#993300"> <tr ><td></td></tr></table> <table style="position:absolute; bottom:0; height=8% " class="midori"> <tr ><td></td></tr></table> </BODY> </HTML> こんな感じなのですが どうしてでしょうか
- ベストアンサー
- HTML
- 画像の上に、背景を表示させテキストを非表示させたdisplay:block;を表示させたい
よくliなどでテキストを非表示にさせ、背景画像を表示させたメニューがありますが、それを画像の上に表示させる方法を教えてください。 通常ならその画像をcssで背景画像に出来るのですが、 画像に順番ずつじんわり表示させるjavascriptの指示をしており、 その画像をcssで背景画像とするわけにいかないのです。 現在ですと、Dreamweaverのデザインプレビューだと正しい位置にdisplay:block;が存在するのですが、 実際にブラウザで確認すると、何も表示されていないように見えます。 下記がソースです。 よろしくお願いします。 ------------------------------------------------------------ 【HTML】 <div id="containerTop"> <div id="titleTop"> <h1><a href="index.html">タイトル</a></h1> <h2>サイト説明</h2> <ul> <li id="profile"><a href="#">プロフィール</a></li> <li id="photo"><a href="#">写真</a></li> <li id="blog"><a href="#">ブログ</a></li> <li id="contact"><a href="#">お問い合わせ</a></li> </ul> </div> <div id="topbgphoto" class="pics"> <img src="img/top/001.jpg" /> <img src="img/top/002.jpg" /> <img src="img/top/003.jpg" /> </div> </div> ------------------------------------------------------------ 【CSS】 /* container [ ----------------------------------------------------------- */ #containerTop { width:1024px; position:relative; margin:106px auto auto 0; } /* titleTop [ ----------------------------------------------------------- */ #titleTop { width:661px; position: absolute; top: 241px; left: 0px; height: 138px; } #titleTop h1 a{ display:block; text-decoration:none; text-indent:-7777px; width:246px; height:24px; position: absolute; top: 25px; left: 370px; padding:0; font-size:12px; } #titleTop h2{ display:block; text-decoration:none; text-indent:-7777px; width:310px; height:16px; position: absolute; top: 70px; left: 304px; padding:0; font-size:12px; } /* menu [ ----------------------------------------------------------- */ #titleTop ul { position: absolute; top: 87px; left: 0x; padding:0px; list-style:none; } #titleTop li { } #titleTop li a { display:block; text-decoration:none; text-indent:-7777px; height:17px; width:59px; } #titleTop li a:hover { background-image: url(../img/top/menu_ov.jpg); } #titleTop li#profile a{ background-position: 0 0; position: absolute; top:17px; left:344px;} #titleTop li#photo a{ background-position: -70px 0; position: absolute; top:17px; left:414px;} #titleTop li#blog a{ background-position: -140px 0; position: absolute; top:17px; left:484px;} #titleTop li#contact a{ background-position: -210px 0; position: absolute; top:17px; left:554px;} /* ゆっくり表示させる背景画像 [ ----------------------------------------------------------- */ .pics { width:1024px; height:587px; padding: 0; margin: 0; }
- ベストアンサー
- HTML
- tableタグについて
どのようのウィンドー幅になっても全ての文字が表示させたいのですが、以下のタグの何処がおかしいのでしょうか。 <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td> <div align=center> <table width="700"> <tr> <td>あいうえお・かきくけこ・さしすせそ</td> </tr> </table> </div> </td> </tr> </table> この場合、ウィンドー枠を右から左に向かって縮小していくと、「あいうえお・かきくけこ・さしすせそ」の”そ”から順に見えなくなります。 そのではなくて、 あいうえお かきくけこ さしすせそ になり、 さらに縮小すると あい うえ おか かき くけ こさ しす せそ の様な感じで すべてが表示されるようにしたいのですが、どのようなタグを挿入すれば良いのでしょうか？ お願いします。
- ベストアンサー
- ホームページ作成ソフト
- tableタグについて
<table width="700" border="0"> <tr><td width="700">あああああああ</td></tr> <tr><td width="200">いい</td><td width="500">ううううう</td></tr> </table> このタグですと【ああああああ】の部分が２段になります。 多分<td width="200">のためやと思うのですが、 <tr><td width="200">いい</td><td width="500">ううううう</td></tr> の部分を <tr><td width="700"><table width="700"><tr><td width="200">いい</td><td width="500">ううううう</td></tr></table></td></tr> にすると表示されます。 この方法以外にもっと簡単に表示できる方法はないでしょうか お願いします。
- ベストアンサー
- HTML
- tableの横の位置を変えるには？？
<div> <table> <tr><td>あ</td><td>い</td></tr> <tr><td>う</td><td>え</td></tr> </table> </div> が仮にあったとして、これを外部ＣＳＳファイルでどこかのタグに text-align:center を適用させ、テーブルの位置を真ん中にさせたい（表のような使い方です）んですが、自分でやってみたら、divとtableにＩＤとclassで両方試して適用させましたができませんでした。 この表の横の位置をブロックとしてとらえて移動させることはできる でしょうか？？
- ベストアンサー
- HTML
お礼
ありがとうございます。 参考にさせていただきます。