- ベストアンサー
スタイルシートを使うとボーダー関連設定の挙動が変わる?
tableタグには、 bordercolordarkと、bordercolorlightがありますが、 スタイルシートには、border-colorしか指定出来ません。 tableタグでbordercolorを指定すると格子状に全体の枠線に反映されるのに対し、 スタイルシートでtableタグにクラス指定でborder-colorを記述しても、外枠しか反映されません。 この変の挙動の決まりがよく分からないのですが、 どなたかお詳しい方はいらっしゃいませんでしょうか? ちなみに、今実現したいことは、 tableに立体感の無い枠線(影なし1色)を付け、各セルを区切る線も同色で書きたいのです。 外枠だけは少し太めにし、一番上の行は見出し行とし、枠線と同色で塗りつぶすので、その塗りつぶしたセルと枠線との間に溝が出来ないようにしたいのです。 また、文字数制限があるので、極力スタイルシートを利用して、同じコードを書かないようにしたいのです。 ややこしくて恐縮ですが、お知恵をお借りしたくお願い致します。
- みんなの回答 (3)
- 専門家の回答
質問者が選んだベストアンサー
HTMLのTABLE要素にはbordercolordarkなどの属性は存在しません。 いつものマイクロソフト方言でしょう。無視します。 CSSである要素に設定した枠線が、当該要素の外枠なのは当然です。 TABLE要素も例外ではありません。表の罫線を全体的に描くのでした ら、TD要素の外枠を指定します。いずれも、border-styleで種類を 指定しますので、solidにしとけばベタになります。 というわけで、 TABLE { border-collapse: collapse; border-style: solid; border-color: aqua; border-width: 4px; } THEAD { background-color: aqua; } TD { border-style: solid; border-color: aqua; border-width: 2px; } って感じのスタイルシートで、 <table> <thead> <tr> <td>見出しその1</td> <td>見出しその2</td> </tr> </thead> <tbody> <tr> <td>セル1</td> <td>セル要素2</td> </tr> <tr> <td>2行目のセル要素1</td> <td>2行目のセル要素その2</td> </tr> </tbody> </table> これでオッケー。
その他の回答 (2)
- yambejp
- ベストアンサー率51% (3827/7415)
こんな感じでどうでしょう? <style type="text/css"> table{ background-color:#000000; border-width:2px; border-style:solid; border-color:#000000; } thead{ background-color:#000000; color:#ffffff; } tbody{ background-color:#ffffff; } </style> <table border="0" cellpadding="2" cellspacing="1"> <thead> <tr> <th>1</th> <th>1</th> <th>1</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table>
お礼
期待通りの結果が得られました。 ありがとうございました。
- 345itati
- ベストアンサー率48% (795/1639)
要するにbordercolor、bordercolordark、bordercolorlightはHTML4.01の規格外で、IEの独自拡張じゃないかと思いますが。。 (手持ちのHTML辞典には独自拡張とは記載されていないので自信無いです。 だからスタイルシートに対応する記述が無くても当然なのではないでしょうか。 Netscapeなどではそもそも表示出来ない場合があるわけですし。 とりあえず、推測範囲だけですみません。
お礼
規格外、独自拡張といったことは頭にありませんでした。 パレットには気をつけていたのですが。 ご指摘ありがとうございます。
お礼
期待通りの結果が得られました。 ありがとうございました。