- ベストアンサー
divでtable表現
<table> <tr> <td>左の要素</td> </td>右の要素１<br>右の要素２</td> </tr> 左の要素は、真ん中（高さ）にあります。 このtableをdivで表現するためには、どうすれば良いですか？ 以下、自分が考えたものです。（左の要素の下に右の要素が割り込んでしまいます） <div style="float:left; margin:50%"> 左の要素 </div> <div> 右の要素１<br>右の要素２ </div>
- HTML
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
関連するQ&A
- DIVで表示が崩れる。
こんにちわ。 お願いします。 TABLEから脱出してDIVで整理整頓しようとおもっているのですが なかなかうまくいきません。 ソースはっちゃいますね <DIV style="width : 780px;height : 100%;z-index : 0;"> <DIV style="width : 780px;clear : both;z-index : 1;"></DIV>(2) <DIV style="width : 200px;float : left;z-index : 2;"></DIV> <DIV style="width : 380px;float : left;z-index : 2;"></DIV> <DIV style="width : 200px;float : right;z-index : 2;"></DIV>(1) </DIV> といった感じでベースになっているDIVがデカデカとあり その中に一段目のDIV(回り込み解除/ヘッダー的役割です)があってその下にDIVが3つ回りこみで並んでる。 という。 で、問題が、HBビルダーで作っているのですが、 ３つならんでるDIV、 一番左は「左に廻り込み」 真ん中は「左に廻り込み」 で、問題は一番右です。 ここを「右に廻り込み」にしなきゃ３つ並ばないのですが、（廻り込み設定しない場合一段下がってしまいます）このままだと、(1)の部分に文章やらTABLEやら画像やらいれると(2)の位置へ表示されてしまいます。(ソースは変わらないのですが)。 ならばとおもってDIVを入れると、右のDIVの下に来てしまいます。 ならばとおもい３つのDIVをDIVで囲み、その外に書いても右のDIVの下へ… 俺がしたいのは、 とにかく一段下げたいのです。TABLEでいえばTRを作りたい。 わかりますでしょうか？
- ベストアンサー
- 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
- mac＆winのsafari4.03にてtableタグのmarginの挙動がおかしい件
htmlとcssは下記です。 tableタグを括っているdivにmarginが適用されていないにも関わらず、 tableの上下の要素にはmarginが適用されています。 どなたか理由がわかる方はいらっしゃるでしょうか。 よろしくお願いいたします。 firefoxだと思ったとおりに動いてくれるのですが。。 ----------------------------- <style> #wrap { background:#F36;} .inner { background:#6CC;} .foot { background:#36F;} table { border-spacing:0; border-collapse:collapse; margin:10px; } td { border:1px #000 solid;} </style> <div id="wrap"> <div class="foot">あああ</div> <div class="inner"> <table> <tr><td>ほげ</td></tr> </table> <!-- ///.inner --></div> <div class="foot">あああ</div> <!-- ///#wrap --></div> -----------------------------
- ベストアンサー
- HTML
- css(div)の中にtableタグを使うとなぜかcellpaddingがきかない
cssのdivの中にtableタグを入れ子にして作成していますが、中側tableのcellpaddingを5に指定しているにもかかわらず余白があきません。 過去ログにCSSの設計思想からすると、DIVの中にTABLE要素を組み込むことは論理矛盾であると書かれていましたが、複雑な表になってくると知識がないため、テーブルを使っているのが現状です。 なぜ余白があかないのでしょうか？また対応する方法はあれば教えていただきたいです。よろしくお願いします。 <div id="fee_table"> <table width="460" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#C4D6A7"><table width="460" border="0" cellspacing="1" cellpadding="5"> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> </table></td> </tr> </table> </div> ■---css---------------------------------------■ #fee_table { font-size: 95%; margin : 10px 0 10px 15px; }
- 締切済み
- HTML
- 【ＣＳＳ】floatで左右に並べた<div>のマージンが効かない。
ＣＳＳ(スタイルシート)においてfloatで２つのdivを左右に並べる方法は定番ですが、<div id="A">に設定したマージンが【firefox】でききません。 おそらく基礎的なことと思われますが、検索の仕方が悪いのか、 該当する質問を探し出すことが出来ませんでしたので、質問させていただきました。 どなたか、教えていただければと思います。 【HTML】--------------------------------- <div id="A"> <div class="B"> <h3>テキスト</h3> <p>タイトル</p> <table> <tr> <th scope="col">テキスト</th> <td>テキスト </td> </tr> <tr> <th scope="col">テキスト</th> <td>テキスト</td> </tr> </table> </div> <div class="C" > <h3>テキスト</h3> <p>タイトル</p> <table> <tr> <th scope="col">テキスト</th> <td>テキスト </td> </tr> <tr> <th scope="col">テキスト</th> <td>テキスト</td> </tr> </table> </div> </div> 【CSS】--------------------------------- #A { margin-bottom:10px } #A h3{ background:url(../images/bg_h3_option_half.gif) no-repeat; width:380px; height:31px; padding:0 0 0 15px; margin:10px 0 0 0; overflow:hidden; font-size: 22px; color:#FFFFFF; font-style:normal; } #A div.B { float:left; width:380px; height: 100%; margin-right:20px; } #A div.C { float:left; width:380px; height: 100%; }
- ベストアンサー
- HTML
- ＤＩＶが二つ続いた後の下にテーブルを表示したいので
添付はエクセルの画像ですが ＨＴＭＬでＤＩＶが二つ続いた後の下にテーブルを表示したいのですが <html> <head> <title>test</title> <style type="text/css"> <!-- div.migi, div.hidari{ float : left ; text-align:center; width:100px; background-color: #ffff00; border: 1px #BDBDBD solid; padding: 10px 6px; } div.migi{ float: right; } --> </style> </head> <body> <div class="hidari"> hidari </div> <div class="migi"> migi </div> <table border=1 cellspacing=0> <tr><td>1</td><td>2</td></tr> </table> </body> </html> このコードだとDIVの中にテーブルが入ってしまいます。 理想は添付画像です。 どうすれば良いでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- HTMLでテーブルをfloatで中央配置に並べたい
よろしくお願いします。 floatを使ってテーブルを横に複数個並べているのですが、全体が左に寄ってしまいます。 並べたテーブルすべてを中央に配置するにはどうしたらよいのでしょうか。 テーブルとテーブルの間の隙間を固定にしたいので、マージンは固定です。 ■HTML <body> <table><tr><td>TEST1</td></tr></table> <table><tr><td>TEST2</td></tr></table> <table><tr><td>TEST3</td></tr></table> </body> ■CSS table{ float: left; width: 100px; border: 1px solid #000000; margin: 0px 10px 0px 10px; } よろしくお願いいたします。
- ベストアンサー
- CSS
- tdタグ内でcssを用いて、左下（または右下）から文章を挿入したい
<table> <tr> <td>あいうえお</td> <td>かきくけこ<br>さしすせそ<br>たちつてと</td> </tr> </table> のようなテーブルがあったとき 左の要素の「あいうえお」を左下からに表示したいのですが、 どのようにすればよろしいでしょうか。 <table> <tr> <td class="bottom_left">あいうえお</td> <td>かきくけこ<br>さしすせそ<br>たちつてと</td> </tr> </table> のようにcssにより、左下から文字を表示させせたいとおもっています、このとき cssファイル内の td.bottom_left{ このなかはどのように記述すればよいでしょうか？ } いろいろ試してみたのですがうまくいきません。 回答お願いします。
- 締切済み
- HTML
- tableがbodyにはみ出る。。
文章での質問で恐縮ですが、 html例に記載のような形で、レイアウトを作っています。 ヘッダーとフッター、左右のBOXとベタな構成かと思ってますが、 右ボックス（div right-box）内のテーブルの行が増えた際（運用上、可変で増えます）に、 tableがdiv構成（wrap-1,wrap-2,right-box,footer）からはみ出して、bodyの領域に出てしまいます。 スタイルシートでは左右のボックスをfloat left、float rightしていて、 テーブルの行が可変なので、left-box以外にはheightは指定していないです。 ※left-boxのheight指定は100% heightを指定しなければ、基本的に行追加に合わせて、可変で動くような気がしているのですが、 どうもうまくいかないです。 left-boxにheightを指定しているのは、left-box内に定義している要素があり、 heightの指定がない場合に、その要素の高さになってしまうので、 right-boxと同じ高さになるように、１00%を指定しています。 分かりにくい質問で申し訳ないですが、 right-boxのheightをtableの行追加に合わせて可変にする方法はないでしょうか？ 本来、heightなしで可変になるのであれば、 可変にならない原因の推測をお願いします。 ---ここからhtml例--- <html> <head> </head> <body> <div id="wrap-1"> <div id="header">; </div> <div class="wrap-2"> <div id="left-box"> </div> <div id="right-box"> <table id="table"> <tr> <td><textarea></textarea></td> </tr> <tr> <td><textarea></textarea></td> </tr> <tr> <td><textarea></textarea></td> </tr> <tr> <td><textarea></textarea></td> </tr> <tr> <td><textarea></textarea></td> </tr> <tr> <td><textarea></textarea></td> </tr> </table> </div> </div> <div class="footer clear"> </body> </div> </div> </body> </html>
- ベストアンサー
- HTML
- 画像とテキストのレイアウト
左に画像、その画像の右に複数行のテキストを、画像高さの中央に配置したいと思っています。 <table><tr><td><img></td> <td style="vertical-align:middle"> 文１<br> 文2<br> 文3<br> </td></tr></table> をテーブルを用いないでレイアウトしたいということです。 <img src="loc"> 文１<br> 文2<br> 文3<br> では、文１ のみが画像右に表示されます。 <img src="loc" style="float:left"> 文１<br> 文2<br> 文3<br> では、文全体が画像のtop位置から表示されます。 どのようにスタイルシートで指定すればいいのでしょうか？
- ベストアンサー
- HTML
