mac&winのsafari4.03にてtableタグのmarginの挙動がおかしい件

このQ&Aのポイント
  • mac&winのsafari4.03でtableタグのmarginの挙動が異常
  • tableタグを括っているdivにmarginが適用されていないが、tableの上下の要素にはmarginが適用されている
  • firefoxでは正しく動作するが、理由は不明
回答を見る
  • ベストアンサー

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
  • 回答数1
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • Sylar
  • ベストアンサー率71% (10/14)
回答No.1

検証した結果 safariがそうなら・・・予想通りchromeでも同じ症状を確認。 対策 border入れる paddingを入れる この症状は以前に見たことが・・・。 おそらく「margin の相殺」でしょうね。

関連するQ&A

  • 可変長要素を中は左寄せのまま中央寄せ

    widthが可変長の要素があって、その中は左寄せのまま、中央寄せにしたいです。 次のようにテーブルを使えばできたのですが、 テーブルを使わずにやることはできますか?     <style>         .outer{             width:500px;             margin:0 auto;             background:#eee;             text-align:center;         }         .inner{             background:yellow;             margin:0 auto;             text-align:left;         }     </style>     <div class='outer'>         <table class='inner'>             <tr>                 <td>可変長の文字列・・・・・・・・・・</td>             </tr>             <tr>                 <td style='padding:20px 0;'>aaa</td>             </tr>             <tr>                 <td>bbbbbbbbbbbbbb</td>             </tr>         </table>     </div> display:inline-blockを使っても中央寄せにはなりますが、 「行間」の設定が困難でこれではだめでした。 (1行だけならline-heightで設定できるが、複数行になったとき意図したものではなくなる)     <div class='outer' >         <span class='inner' style='display:inline-block'>             <span>可変長の文字列・・・・・・・・・・・・・・</span><br>             <span>「行間」の設定はできないのでだめ</span>         </span>     </div> 宜しくお願いします。

    • ベストアンサー
    • CSS
  • テーブルの角を丸くして、立体的に

    先日、IEでも閲覧可能で、 テーブルの線を細くするスタイルシートを このように教えて頂きました。 このスタイルシートから、 テーブルの角を丸くして、 立体的にする書き方を教えて頂けると とっても助かります。 ------------ <!DOCTYPE html> <html lang="ja"> <head> <style type="text/css"><!-- table.WebDesign{ border-collapse: collapse; width: 400px;} table.WebDesign,table.WebDesign td{border:solid 1px #1C79C6;} --></style> </head> <body><div> <table class="WebDesign"> <tr><td>Webデザイン</td><td>Webデザイン</td></tr> <tr><td>Webデザイン</td><td>Webデザイン</td></tr> </table> </div></body></html>

    • ベストアンサー
    • CSS
  • ラインはtableタグを使って書くのでしょうか?

    <table border="0" width="100%" style="bordr-left:0px;border-right:0px;border-top:thick ridge;border-bottom:0px"> <tr><td width =100%></td></tr></table> htmlを勉強中でソースをのぞいてみるのですが、テーブルのデーターなしで幅が0とか??でわかりません。なぜラインになるのでしょうか?<hr>とかとはちがうのでしょうか??おおしえください

  • cssでテーブルで細い線

    スタイルシートを使って 1ピクセルの細い線にしようと、 サンプルのように以下のようにしてみましたが 中の線(td?)が二重になってしまいます 一線にするのにどのようにすればイイですか? ―――――――― .table2 { width: 400px; /* テーブルの横幅 */ border-collapse: collapse; /* 枠線の表示方法 */ border: 1px #1C79C6 solid; /* テーブル全体の枠線(太さ・色・スタイル) */ background-color: #FFFFFF; /* 背景色 */ } .table2 TD { border: 1px #1C79C6 collapse; /* セルの枠線(太さ・色・スタイル) */ } ―――――――――――――― <TABLE CLASS="table2"> <TR> <TD>WebデザインA</TD> <TD>WebデザインB</TD> </TR> <TR> <TD>WebデザインC</TD> <TD>WebデザインD</TD> </TR> </TABLE>

    • ベストアンサー
    • CSS
  • 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
  • サイズ指定したテーブルを縦に並べるとセルがズレる

    色々と試しているんですが解決できないので教えてください。 CSSで全く同じようにサイズ指定しているテーブルを縦に並べた時、同じようにサイズ指定しているはずなのに、IEではセルの内容(テキストの長さ)によってセルの幅が変わってしまいます。具体的に言うと、ショッピングカートの商品ページのようなものを作ろうとしているのですが、以下のようなソースです。 .menu-table{ width:500px; padding:0px; border-collapse:collapse; } .menu-title{ margin:0px; padding:5px; border:1px solid #ff9900; } .menu-img{ width:110px; margin:0px; padding:5px; border:1px solid #ff9900; } .menu-style1{ width:70px; margin:0px; padding:5px; border:1px solid #ff9900; } .menu-style2{ width:300px; margin:0px; padding:5px; } .menu-style3{ margin:0px; padding:5px; } <table width="0" border="0" cellspacing="0" cellpadding="0" class="menu-table"> <tr> <td colspan="3" class="menu-title">商品名</td> </tr> <tr> <td rowspan="4" class="menu-img"><img src="item.jpg" width="100" height="100" /></td> <td class="menu-style1">説明1</td> <td class="menu-style2">あいうえお</td> </tr> <tr> <td class="menu-style1">説明2</td> <td class="menu-style2">かきくけこ</td> </tr> <tr> <td class="menu-style1">価格</td> <td class="menu-style2">\1,000¥</td> </tr> <tr> <td colspan="2" class="menu-style3">あいうえおかきくけこさしすせそたちつてとなにぬねの</td> </tr> </table> こういうテーブルを縦にいくつか並べた時、例えば2つ目のテーブルが「あいうえお」のところに「あいうえおかき」と入力すると、「あいうえお」と入力したテーブルに比べて「説明1」のセル幅が狭くなってしまいます。Firefoxでは綺麗に揃うんですが、どうしてもIEではずれます。ボーダーの幅のぶんも計算に入れて幅を指定し直してもずれるんです。説明が下手すぎてうんざりかもしれませんが、どなたか解決策が分かれば教えてください。

    • 締切済み
    • CSS
  • tableタグについて

    tableタグの挙動について教えてください。 下記のタグで、tableの幅は240pxにしたいのですが、 ブラウザ表示(Chrome)では230pxとなりました。 この10pxの隙間はどこで発生しているのでしょうか? どうぞよろしくお願いします。 ーーーーHTMLーーーーー <body style="width:240px;margin:0 auto;"> <div class="list-box"> <table width="240" border="0" cellspacing="0" cellpadding="0"> <tbody><tr> <td>テキスト/td> <td>テキスト/td> </tr> </tbody></table> </div> </body> ーーーーCSSーーーーー .list-box{margin:0 auto;} .list-box table{ width:100%;} .list-box table td:first-child{ background:#900;} .list-box table td:last-child{ background:#069;}

    • ベストアンサー
    • CSS
  • tdに指定したborderの隙間について

    tdにborder(dotted)を指定して線を引きたいのですが、 セルの境目に隙間が空いてしまいます。 《html》 <table class="information"> <tr> <td class="infoborder_u">営業時間</td> <td class="infoborder_u">月曜~金曜</td> <td class="infoborder_u">9:00 ~ 19:00</td> </tr> 《css》 .information{ width: 350px; height: 180px; background-color: #808080; margin: 10 0 0 0px; border-collapse: collapse; } .information td{ padding-left: 10px; } .infoborder_u{ border-style: dotted; border-width: 1 0 0 0px; border-color: #000000; } 回避方法はないでしょうか?

  • IE以外のブラウザで隙間ができる

    お世話になっております。 上テーブルと下テーブルを隙間なく配置したいのですがIE6,7以外のブラウザだと3pxくらいの隙間ができてしまいます。厚かましいお願いで恐縮ですが、下記タグをチェックしていただけないでしょうか…。 <table width="758" height="160" border="0" cellpadding="0" cellspacing="0" background="image/gazou.jpg" style="background-repeat:no-repeat"> <tr><td height="30">&nbsp;</td></tr> <tr><td>ここに文字を入れています</td></tr> <tr><td height="30">&nbsp;</td></tr> </table> <div class="test"><br> <table width="758" border="0" cellpadding="0" cellspacing="0"> <tr><td>ここも文字</td></tr> </table> </div> 上のテーブルには背景画像を指定しており、下テーブル部分に色をつけたいのでdivを使いCSSを適応させています。(デザイン上、下テーブル背景に色をつけるのではダメなので) これが問題なのかと思い、divタグを消してみたりしましたがだめでした。 div"test"のCSSは .test{ margin:0px; padding:0px; background-color:#333333; border-bottom:solid 1px #999999; width:758px; height:262px; } としています。 本当に厚かましいお願いで恐縮ですが、ご教授いただけるととても助かります。どうぞよろしくお願いします。

    • ベストアンサー
    • 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

専門家に質問してみよう