スタイルシートを使うとボーダー関連設定の挙動が変わる？

tableタグには、
bordercolordarkと、bordercolorlightがありますが、
スタイルシートには、border-colorしか指定出来ません。
tableタグでbordercolorを指定すると格子状に全体の枠線に反映されるのに対し、
スタイルシートでtableタグにクラス指定でborder-colorを記述しても、外枠しか反映されません。
この変の挙動の決まりがよく分からないのですが、
どなたかお詳しい方はいらっしゃいませんでしょうか？

ちなみに、今実現したいことは、
tableに立体感の無い枠線（影なし１色）を付け、各セルを区切る線も同色で書きたいのです。
外枠だけは少し太めにし、一番上の行は見出し行とし、枠線と同色で塗りつぶすので、その塗りつぶしたセルと枠線との間に溝が出来ないようにしたいのです。

また、文字数制限があるので、極力スタイルシートを利用して、同じコードを書かないようにしたいのです。

ややこしくて恐縮ですが、お知恵をお借りしたくお願い致します。

No.1 回答者： 345itati 回答日時： 2006/09/13 11:10

要するにbordercolor、bordercolordark、bordercolorlightはHTML4.01の規格外で、IEの独自拡張じゃないかと思いますが。

。
(手持ちのHTML辞典には独自拡張とは記載されていないので自信無いです。

だからスタイルシートに対応する記述が無くても当然なのではないでしょうか。
Netscapeなどではそもそも表示出来ない場合があるわけですし。

とりあえず、推測範囲だけですみません。

この回答へのお礼

規格外、独自拡張といったことは頭にありませんでした。
パレットには気をつけていたのですが。

ご指摘ありがとうございます。

お礼日時：2006/09/13 15:39

No.2 回答者： yambejp 回答日時： 2006/09/13 11:15

こんな感じでどうでしょう？

<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>

この回答へのお礼

期待通りの結果が得られました。
ありがとうございました。

お礼日時：2006/09/13 15:37

No.3 ベストアンサー 回答者： grumpy_the_dwarf 回答日時： 2006/09/13 13:17

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>２行目のセル要素1</td>
　　　　<td>2行目のセル要素その2</td>
　　</tr>
</tbody>
</table>

これでオッケー。

この回答へのお礼

期待通りの結果が得られました。
ありがとうございました。

お礼日時：2006/09/13 15:36