- ベストアンサー
テーブルを挿入すると他のCSSと干渉してレイアウトが崩れてしまいます。
いくらやっても作成したテーブルを挿入するととの画像やメニューと干渉してレイアウトが崩れてしまいます。テーブルを取るとレイアウトが戻ります。。。 文字量の関係でテーブルだけ記入しました。 <HTML> <HEAD> <STYLE type="text/css"> <!-- /*テーブル*/ table {position:absolute; left:200px; top:450px; font-family:MS,UI,Gothic,標準; FONT-SIZE: 11px; COLOR: #666666; font-weight: lighter; text-align:center; border-collapse:collapse } caption { font-family:MS,UI,Gothic,標準; FONT-SIZE: 11px; COLOR: #666666; font-weight: lighter; text-align:left; } table,th,td {border:1px solid} div {margin:20px} --> </style> </head> <body> <div> <table> <caption>ジャズシューズサイズ表</caption> <tr><th width=70px>Sansha</th><td width=30px>2</td><td width=30px>3</td><td width=30px>4</td><td width=30px>5</td><td width=30px>6</td> <td width=30px>7</td><td width=30px>8</td><td width=30px>9</td><td width=30px>10</td><td width=30px>11</td> <td width=30px>12</td><td width=30px>13</td><td width=30px>14</td><td width=30px>15</td> </tr> <tr><th>(cm)</th><td>21</td><td>21.5</td><td>22</td><td>22.5</td><td>23</td><td>23.5</td><td>24</td> <td>24.5</td><td>25</td><td>25.5</td><td>26</td><td>26.5</td><td>27</td><td>27.5</td> </tr> </table> </div> </body>
- maverick2002
- お礼率56% (9/16)
- CSS
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
空いている右下（left:200px top:450px）にテーブルをおきたくて、そのように書いてあるのに、他と重なってしまうっていう状況が今ひとつわからないのですが、ポジションで指定した位置に表示されないってことなんでしょうか？ 少なくとも、質問文のHTMLだけだと、ちゃんと指定した位置（left:200px; top:450px;）に表示されているので、どういった状況なのかもう少し詳しくわからないと、皆さん答えようがないと思いますよ。 たとえば、テーブル挿入前はいいけど、テーブルを挿入するとレイアウトが崩れるというのも、挿入したテーブルがメニューや画像とかぶってしまうのか、他のもの全てがあらぬレイアウトになってしまうのか。とか、単純にleft:200px top:450pxの位置に入らないだけなのかとか、他の要素の位置指定もスタイルシートで行っているのかとか。 もしも、すべてのものをポジションでコントロールしているのなら、スタイルシートだけでもココに乗せてもらえれば、解決の糸口は見つかるかもしれませんね。(その際には、それぞれのものの縦横のサイズもわかったほうがいいと思いますが) とにかく、何かしら情報がもう少しわかればといった感じでしょうか。
その他の回答 (2)
- antai
- ベストアンサー率38% (88/227)
すべてがわからないのと、私の力量不足も手伝って、なかなか原因となりそうなのはわかりませんが、とりあえず、ココにあるだけの情報でいくと、 質問文の中にある div {margin:20px} のせいで、全体的にレイアウトおかしくなってるのはあると思いますが、さすがにこれはここへの書き込みの都合でって感じでしょうね。 あと、私が思いつくのはpositionの“親子”関係的なものでしょうか。 親にあたるものに、static以外で位置指定がされていると、位置指定の基点が、ページの左上じゃなくなるのでそのせいで、指定した位置どおりに表示されなくなってたりってこともあるのかなぁって事くらいですね。 たとえば、 <html> <head> <style type="text/css"> <!-- .ichi { position:absolute;left:100px;top:100px;} --> </style> </head> <body bgcolor="#FFFFFF" text="#000000"> <div class="ichi"> <table width="300" border="1" cellspacing="0" cellpadding="0"> <tr> <td> <div align="center">親</div> </td> </tr> </table> <div class="ichi"> <table width="300" border="1" cellspacing="0" cellpadding="0"> <tr> <td> <div align="center">子</div> </td> </tr> </table> </div> </div> <div class="ichi"> <table width="300" border="1" cellspacing="0" cellpadding="0"> <tr> <td> <div align="center"><font color="#99CC66">重なって見難いけど…</font></div> </td> </tr> </table> </div> </body> </html> こんな感じで、3つのテーブルには同じスタイルシートを適用しているけど、親テーブルのdivタグ内にある子テーブルは親テーブルの左上から右に100px、下に100pxの位置に表示され、もう一つのテーブルは重なって見難いですが、親テーブルと同じ位置に表示されています。 これのせいで、追加したテーブルだけが何かの外にあるor何かの中に入ってしまっているせいで、位置がおかしくなってしまっているのかもしれませんね。 あまり的を射てなさげな回答でスイマセン。 どっちか、もしくは両方で何とかなるといいですが。 また何かありましたら、わかる範囲でお手伝いできればと思います。
- flowermaze
- ベストアンサー率56% (159/282)
＞table {position:absolute; left:200px; top:450px; ここで、テーブルを左から200ピクセル、上から450ピクセルの位置に表示するように指定していますが、これは必要な指定でしょうか？ この位置指定がほかの画像などとテーブルが重なってしまう要因ではないかと思います。 position:absolute; left:200px; top:450px; を削除してみてください。
補足
ありがとうございます。しかしながら 削除しましたが、定位置の左上に表示され ＣＳＳで作成したメニューバーやタイトル が崩れてしまいました。 レイアウト的にテーブルを入れる場所が空い ているのが右下なのでleft:200px; top:450px; の座標に置きたいのです。。。。
関連するQ&A
- CSSのテーブルについて教えて下さい。
テーブルなのですがh1が適用されません。 又表の枠線が黒になりません。 また（休診）を赤にしたいのですが表示されません。 どこをどう直したらいいのか教えて下さい。 お願いします。 h1 { margin: 1em 0; padding: 0.3em; border: 1px silver solid; background: url(../image/subpage_h2_bg.gif) bottom repeat-x; color: gray; font-weight: bold; font-size: large; } /*hyou*/ caption{ color: #996666; padding-bottom: 14px; text-align: center; } table{ width: 800px; border: solid 2px ; border-collapse: collapse; } th,td { padding: 5px; border: solid 1px #000000; text-align:center; } th { background-color:silver; font-weight: bold; } td.col01{ font-weight: bold; background-color:silver; } em { color: red; font-weight: bold; } /* テーブル列幅指定 */ .cola { width:100px; } .col01{ width: 100px; } .col02{ width: 70px; } .col03{ width: 70px; } .col04{ width: 70px; } .col05{ width: 70px; } .clo06{ width: 70px; } .style1 {margin-left:1em; } HTML <h1>外来診療のご案内</h1> <table> <caption>外来診療 予定表</caption> <tr> <th class="a">診察科</th> <th class="b">月</th> <th class="c">火</th> <th class="d">水</th> <th class="e">木</th> <th class="f">金</th> <th class="g">土</th> <th class="h">日</th> </tr> <tr> <th class="col01">一般歯科</th> <td class="col02" rowspan="4"><em>休診</em></td> <td class="col03" colspan="5">◯</td> <td class="col04" rowspan="4"><em>休診</em></td> </tr> <tr> <th class="col01">小児歯科</th> <td class="col02">◯</td> <td class="col03"> </td> <td class="col04">◯</td> <td class="col05"> </td> <td class="col06">◯</td> </tr> <tr> <th class="col01">歯列矯正</th> <td class="col02"> </td> <td class="col03">◯</td> <td class="col04"> </td> <td class="col05">◯</td> <td class="col06"> </td> </tr> <tr> <th class="col01">審美歯科</th> <td class="col02"> </td> <td class="col03">◯</td> <td class="col04"> </td> <td class="col05"> </td> <td class="col06">◯</td> </tr> </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
- CSSを使った丸ナンバー付きテーブルの挿入
HTMLで作成した丸ナンバー付きテーブルをスタイルシートを使って挿入しようと思っているのですが、肝心の数字の部分が真っ白になってしまいました。関係しそうなところだけ抜き出してみました。 （↓headの中に書いてある） body {background-color: white; background-image: url(dolp2.gif); color: #000000} table, td {width: 800px; border: 2px #C0C0C0 solid; border-collapse: collapse; background-color: #ffffff;} （↓body以下に書いてある） <div><Table border="0"><Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> １ </Td></Tr></Table> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい１＝＝＝ </Td></Tr> <Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> ２ </Td></Tr></Table> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい２＝＝＝ </Td></Tr> <Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> ３ </Td></Tr></Table></div> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい３＝＝＝ </Td></Tr></Table> このようなタイプのものはheadやcssにあげたほうがいいのでしょうか？ 最初はこのままbodyのなかに収めておこうかと思っていたのですが、上記のような事態になってしまったのでどうしたらいいのか困っています。 HTML初心者なので、なにとぞ宜しくお願いします。
- ベストアンサー
- HTML
- レイアウトの崩れについて
先日から初めてHP作りに挑戦しているのですが、<div>の中の<table>の位置がおかしい（tableの位置がdivの下のほうに突き抜けて表示される）ので困っています。 どうすればdivの中にtableがおさまるでしょうか。 (XHTML) <div id="main"> <div class="contents"> <table> <tr> <td id="tdl" rowspan="4">>映像</td> <th>文字</th> <td>文字</td> </tr> <tr> <th>文字</th> <td>文字</td> </tr> <tr> <th>文字</th> <td>文字</td> </tr> <tr> <th>文字</th> <td>文字</td> </tr> </table> </div> </div> <div id="sub"> 内容 </div> (CSS) #main { width: 600px; float: left; } .contents { width: 600px; height: 155px; background-color: #f5f5dc; font-size: 16px; float: left; } table { width: 590px; height: 150px; border-collapse: collapse; table-layout: fixed; border: solid; border-color: #f1f1f1; } th { width: 100px; height: 32px; border-bottom: solid; border-bottom: thin dotted; background-color: #f1f1f1; font-size: 16px; text-align: left; } #tdl { width: 160px; height: 145px; border: none; } td { width: 320px; height: 32px; border-bottom: thin dotted; font-size: 16px; text-align: left; } #sub { width: 150px; height: 145px; background-color: #999; float: right; } 関係あるか分かりませんが、サイト全体の幅は770pxです。 書き方がめちゃくちゃだと思うので、おかしなところも指摘していただけると幸いです。 よろしくお願いします。
- ベストアンサー
- HTML
- ▲▲テーブルと一緒に<FONT size="2"></FONT>は使えない？
こんばんは☆僕は今テーブルを利用してカラーコード一覧を作成しています。そこで日本語の文字を入力したのですが…<FONT size="2">Color Code一覧</FONT>と「テーブルの外に」入力すると【Color Codeˆê—— 】←のように表示されます…。直接【Color Code一覧】入力すると問題はありません。なぜでしょうか？わかる方教えてください☆ <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> </FONT size="2">Color Code一覧</FONT> <TABLE Border Cellspacing="1"Width="20%" align="center"> <TR> <TD><FONT size="3" face="MS UI Gothic"><DIV align="center">Collar Code・RGB</DIV></FONT></TD> </TR> </TABLE> <BR> <TABLE Border Cellspacing="1" Width="75%" align="center"> <TR> <TD colspan="6"><FONT size="3" face="MS UI Gothic"><DIV align="center">#000000 - #00ffff</DIV></FONT></TD> </TR> <TR> <TD BgColor="#000000"><FONT size="3" face="MS UI Gothic"><DIV align="center">#000000</DIV></FONT></TD> <TD BgColor="#000033"><FONT size="3" face="MS UI Gothic"><DIV align="center">#000033</DIV></FONT></TD> <TD BgColor="#000066"><FONT size="3" face="MS UI Gothic"><DIV align="center">#000066</DIV></FONT></TD> ～～～～～～～～～～～～～～～～～～～～～～～ ～～～～～～～～～～～～～～～～～～～～～～～ </TR> </TABLE> </BODY> </HTML>
- ベストアンサー
- HTML
- borderが1のテーブル
ボーダーが1ピクセルくらいの表を作りたいので、tableの入れ子で作ったのですが「tableの入れ子は良くない」ととあるサイトで読んだので、入れ子にしないでtableを作りたいのですが何か良い方法はありますでしょうか？ 私が書いたのはこんなかんじです。 <table width="400" border="0" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#000000"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="1"> <tr bgcolor="#999999"> <th><div align="center"><font size="2">名称</font></div></th> <th><div align="center"><font size="2">模型材質</font></div></th> <th><div align="center"><font size="2">生産材質</font></div></th> </tr> <tr bgcolor="#FFFFFF"> <td bgcolor="#999999"><div align="center"><font size="2">本体</font></div></td> <td><div align="center"><font size="2">発泡塩ビ板</font></div></td> <td><div align="center"><font size="2">プラスチック</font></div></td> </tr> </table></td> </tr> </table> CSSで「style="border-width :1px 1px 1px 1px;border-style : solid solid solid solid ;border-color :#000000 #000000 #000000 #000000 ;"」というのを入れてやってみたのですが、これだと外側にしかラインが表示されませんでした。 よろしくおねがいします。
- ベストアンサー
- その他（プログラミング・開発）
- cssでtableを指定したい
教えてください。 cssでテーブルを指定しているのですが、別の幅のテーブルを指定したいときはどうすればよいのでしょうか。 現在はこういうふうに書いています。ちょっと汚いですが。。。 ----------------------------- #content #main p{ margin:10px 18px 25px; font-size:12px; } #content #main table { border-collapse: collapse; background-color: #FFFFFF; width: 480px; margin:0px padding; border: 0px #000000: 1px; } #content #main caption{ text-align: right; padding-right: 5px; font-size:12px; } #content #main th { border: #999999 1px solid; font-size:12px; font-weight: normal; background-color: #D8EAFC; padding: 5px; } #content #main td{ border-right: #999999 1px solid; border-top: #999999 1px solid; border-left: #999999 1px solid; border-bottom: #999999 1px solid; font-size:12px; text-align: left; padding: 5px; } ----------------------------- 実際にタグを書くときは、こう書いています。 ----------------------------- <table> <tr> <th>aaaa</th> <td>5555555555555555555555555555</td> </tr> </table> ----------------------------- これをmaintable subtable というふうに幅が違うものにしたいのですが、cssにmaintableを追加して、<table class=maintable">と指定しても、maintableではなく、tableで表示されます。 こういう場合はどうすればよいのでしょうか？
- ベストアンサー
- XML
- CSSを使ってテーブルでセル全体をリンクしたい
CSSを使ってテーブルでセル全体をリンクしたい CSSを使ってテーブルでセル全体をリンクしたい・・・と思っています。 ４つのセル？を横並びにして（２段目は説明書き）、一つ一つ違うところに飛べるようにしたいのですけど、文字だけしかリンクできません。。。 block要素？を使うらしい？ということはわかったのですが、テーブル要素と組み合わせて使う場合どうしたらいいのでしょう？ 色々やってみたのですが、セルが縦並べになってしまったりメインのcolorがなくなってしまったり、形が大幅に崩れたりしてしまいました。 ホームページ作りもＣＳＳも初めてなので、なにをどうしたらよいか教えていただけると嬉しいです ソースをのっけておきます ＜ｃｓｓの方＞ table#table-01 { width: 600px; border: 0px #E3E3E3 solid; border-collapse: separate; border-spacing: 20px 0; } table#table-01 th { width: 130px; height: 70px; padding: 5px; border: #E3E3E3 solid; border-width: 1px 0 0 1px; background: #F5F5F5; font-weight: bold; line-height: 120%; text-align: center; } table#table-01 td { vertical-align: top; padding: 1px 3px 20px 0; border: 0px #E3E3E3 solid; border-width: 0; text-align: center; } ＜ｈｔｍｌの方＞ <table id="table-01" cellspacing="20px"> <tr><th>●●●●</th><th>▲▲▲</th><th>■■■</th><th>○○○</th></tr> <tr><td>●の説明</td><td>▲の説明</td><td>■の説明</td><td>○の説明</td></tr> よろしくお願いします
- ベストアンサー
- HTML
- CSSの設定方法について
CSSは外部ファイルにし、十数枚あるHTMLに「div id=contents内にあるTableは全て共通のレイアウト」 となるよう下記のCSSを設定しました。 --------CSS----------------------------------------- #contents{margin-left: 70px;} #contents table{width: 650px; border: solid 1px #B1B2B2; border-collapse: collapse; margin: 15px 0px;} #contents tr, td ,th{padding: 4px; border: solid 1px #B1B2B2; border-collapse: collapse;} --------HTML----------------------------------------- <div id="contents"> <table> <tr> <th>項目</th> </tr> <tr> <td>項目1</td> </tr> </table> </div> ------------------------------------------------------- しかし、どうしても違うレイアウトにしたいTableが出てきた為、下記CSSを追加、 HTMLは<div id="contents">の部分を<div id="login">に変更したのですが 追加CSSが反映されず、id=contentsの設定が残ったままになってしまいます。 色々いじってみたのですが、どこが間違っているのやら皆目見当がつきません。 --------追加CSS----------------------------------------- #login{text-align: center; } #login table{width: 450px; border: solid 2px #666666; border-collapse: collapse;} #login tr, td ,th{border: solid 1px #666666; border-collapse: collapse;} --------HTML----------------------------------------- <div id="login"> <table> <tr> <th>項目</th> </tr> <tr> <td>項目1</td> </tr> </table> </div> 拙い文章で恐縮ですが、ご助言いただけると大変助かります。 説明不足や意味不明箇所は補足させていただきますので、どうぞよろしくお願い致します。
- ベストアンサー
- HTML
- HTMLでテーブルを縦に並べたい！
基本的な質問でお恥ずかしいのですが、困っています。 テーブルを二つ、縦に並べたいのですが、何故か横に並んでしまいます。 どこが悪いのでしょうか？初心者ですみません…お知恵をお貸しください(T_T)。 <caption><font color="#ff0000">●</font>A <font color="#0000ff">●</font>B</font></caption> <table bgcolor="#80ffff" border="1"cellspacing="0" bordercolor="#0000ff" align="left"> <tr><th width="30"><font size="+5"><font color="#ff0000">●</font></th> <th width="150"> <font size="+4"><strong><big>C</big></strong></font></th> <td><font size="+2">D<br>E</font></td></tr> <tr><td></td><td><div align="center"> <font size="4" color="#8080ff"> 準備中</font></div></td><td></td></tr></table> </p></div> <p></p> <table align="center" bgcolor="#80ffff" height="20" width="250" border="1" cellspacing="2" cellpadding="0"> <tr><td><blink>HOME</blink></td></tr> </table> </body>
- ベストアンサー
- HTML
補足
お返事遅くなりまして申し訳ありません。ご丁寧にありがとうございます。文字数オーバーでかけなかったのですが例えば下記ＣＳＳ（一部）と組み合わせるとあらぬレイアウトになってしまいます。全てのものをスタイルシートでコントロールしているからなのかクラスの設定が違うのか？？という状況です。 <HTML> <style type="text/css"> <!-- .title{ position:absolute; left:152px; top:28px; width:700px; } .title div{ float:left } .title a { background-COLOR:#969696; display:block; width:90px; border:none; padding:4px; TEXT-ALIGN: center; TEXT-DECORATION: none; font-size:10px; COLOR: #ffffff; FONT-FAMILY: MS,UI,Gothic,標準; } .title A:hover { background-COLOR:#000000; COLOR:#ffffff; } --> </style> <div class="title"> <DIV> <A href="page11.htm">ＨＯＭＥ</A> </DIV> <DIV> <A href="page02.htm">WHAT'S SASHA</A> </DIV> <DIV> <A href="page03.htm">ＡＢＯＵＴ ＵＳ</A> </DIV> <DIV> <A href="page04.htm">ＣＯＮＴＡＣＴ</A> </DIV> <DIV> <A href="page05.htm">ご利用方法</A> </DIV> </DIV> </BODY> </HTML>