CSSでレイアウト divで囲んだ枠にtableを入れるとブラウザによって表示が異なる

質問

お世話様です。
CSSでレイアウトしたウェブサイトを作成中です。

簡単に書くと・・・

<div id="style_a">
文字列Ａ
<table>
<tr><td></td></tr>
</table>
文字列Ｂ
</div>

ＩＥでは、style_aがテーブル後の文字列Ｂにも反映されるのですが、
FirefoxとOperaでは、テーブルの前の部分でstyle_aが無効になりテーブルと文字列Ｂはデフォルトに戻ってしまいます。

このような場合、どのように設定すればいいのでしょうか？

ちなみに間のテーブルはレイアウトとしてではなくデータを表として表示したいので使っています。
どうか教えてください。

回答No.5

noname#19175 · ベストアンサー

提示されたコードでは再現できませんので、
再現できるようなコードを投稿するか、
そのような表示になるページURLを出せませんでしょうか？

お礼

ありがとうございました。
とりあえず、テーブルをプリントスクリーンして画像にして処理しましたので、大丈夫です。
お手数おかけいたしました。

回答No.4

noname#19175

上記のHTMLなら、文字列Bのほうも、style_aが適用されてますが、、、？

テーブルの中か、テーブルの終わりに変な指定が入ってませんか？
（または<tr>や<td>の外側に全角のスペースとか）

補足

はい、文字列Ｂも摘要したいのです。
全角スペースはないようなのですが・・・。

回答No.3

noname#22222

s_husky です。

CSS の設計思想からすると、DIV の中に TABLE要素を組み込むことは一種の論理矛盾です。
この場合、ブラウザによっては表示が不安定化することは避けられないのではないでしょうか。
質問者の場合、作表という正当な目的でTABLE要素を使っておられます。
CSS が、マルチカラムを正式にサポートしていない現段階では、DIV+TABLEでのレイアウトは現実的と考えます。
その場合、最も、単純なやり方でブラウザ差を克服するのが最良と考えています。

お礼

ありがとうございます

補足

申し訳ございません。私が不勉強で理解できない部分があったのですが、表示の差は仕方がないからレイアウト用にテーブルでくくった方がよいということでしょうか？？

回答No.2

grizzlycat

通常、Mozilla等でもそのような記入方法で問題なく反映されるので、テーブルまでの間に余計な全角スペースや</div>が入っている等で無効化されていないでしょうか？

また、前後、及びstyle_aで指定しているスタイルでも継承関係が変わってくるのでそのあたりを詳しく教えていただけないでしょうか？
※style_aでレイアウト●●と、フォント●●を指定している等※

お礼

さっそくありがとうございます

補足

テーブルをなくすと問題なく表示されますので全角や余計なDIVではない気がします。
style_a の部分にはいくつもかかっているのですが、

#content{
border: 5px solid #0c449b;
text-align: left;

width: 780px;

vioce-family: "\"}\"";
vioce-family: inherit;

width: 780px;
}
html>body #content{

width: 770px;
}

#topic_left1{
margin: 5px;
padding: 2px;
width: 450px;
background-color: #fff;
font-size: 0.75em;
letter-spacing: 0.05em;
color: #333;
line-height: 125%;
text-align: left;
}

#sub {
border: 0px;
margin: 0px;
padding: 5px;
background: #f4f;
vertical-align: top;
text-align: left;
float: left;

width: 460px;
vioce-family: "\"}\"";
vioce-family: inherit;

width: 460px;
}
html>body #sub{

width: 460px;
}

テーブルには
#table{
margin-left: auto;
margin-right: auto;
padding: 0px;
border: 1px solid #000;
border-color: #f60;
border-spacing: 0px;
border-collapse: collapse;
font-size: 0.9em;
background-color: #fff;
text-align: center;
}

td {
text-align: center;
vertical-align: middle;
padding: 4px 6px 2px;
cell-spacing: 0px;
border: 1px solid #000;
border-color: #f60;
}

回答No.1

noname#22222

<div id="style_a">
文字列Ａ]
</div>
<table>
<tr><td></td></tr>
</table>
<div id="style_a">
文字列Ｂ
</div>

お礼

さっそくありがとうございます

補足

最終手段としては考えているのですが、できれば違う方法で中に入れていきたいんです。お知恵をください。