スタイルシートとページ内の指定矛盾について

質問

tableタグのborderについてなのですが、

基本的にはborderを表示したくないので全ページ共通のスタイルシートで
border: none;
にしているのですが、あるページの一部分だけtableでborder="1"にしたい箇所があり当該ページ内のそのtableだけborder="1"と付け加えたのですがIE6で見たところ上と左だけ表示されていて右と下は表示されていませんでした
また、Firefoxでは全て非表示でした

CSSよりもその箇所の指定の方が優先されるのかなと思ったのですが、うまく表示されません
どう対処すればいいでしょうか

回答No.1

4017B · ベストアンサー

それはcss設定の仕様ですね。

table { border:none; }

～と一括で指定して置いて。
必要な部分にだけ個別に、

<table border="1"><tr><td>あああ</td><td>いいい</td></tr></table>

～みたいにしたいと言う欲求、良く分かります(笑)。
この原因はHTMLタグの要素である「border="1"」と、cssの設定で行う「border:～;」は似て非なる物だからです。

とりあえずの解決方法は…

table#Border1 {
　padding: 0;
　border-collapse: collapse;
　border: 1px solid #000;
}
table#Border1 td, table#Border1 th {
　border:1px solid #000;
}

～の様な新たなid属性を指定して置き、

<table id="Border1"><tr><td>あああ</td><td>いいい</td></tr></table>

～と言う風にHTMLを記述すれば。
線無しをDefaultのままに、必要な箇所のみ表線を入れる事が出来ます。

P.S.
＞IE6で見たところ上と左だけ表示されていて右と下は表示されていません～
恐らくソレはちゃんと表示されてるんですけども、IEのDefaultの設定だとtableタグ用の線の色が薄いので、右と下の部分がモニタ環境などによっては良く見えなかったのではないのかと…？？

FireFoxの方は持ってないので良く分りませんが。
自分の所の最新版のMozillerとTridentエンジン、およびwebkitでは問題無く表線は表示されます。ブラウザが単純に古いだけなのかも？？

お礼

ちょ～感動です(T T)
そのものズバリの回答ありがとうございます。
御指南いただいた方法でさくっとうまくいきました

＜「border="1"」と、cssの設定で行う「border:～;」は似て非なる物
これが同じものだと思っていたので、「なぜだろう、なぜだろう」、きっとスペルミスとか変なところが抜けているだけのはずと思いこんで、ずっと困っておりました
HTMLタグのborderと同一ものもがなく、idで回避する方法にはただただ感激しております
本当にありがとうございましたm(_ _)m