揮発性のメモ２

http://d.hatena.ne.jp/iww/

テーブルの外枠の色を変更する

css


こんな感じで指定したとこの外枠だけ色をつけたい
opera,firefoxだけでうまくいく書き方

<HTML>
<HEAD>
  <meta http-equiv="Content-Language" content="ja">
  <meta http-equiv="Content-Type" content="text/html; charset=SJIS">
  <meta http-equiv="Content-Script-Type" content="text/javascript; charset=UTF-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <style type="text/css">
BODY {
    background-color: #D0FFD0;
}

/* テーブル関連 */
TABLE.hyo {
    margin: 1px;
    border: 2px black solid;
    border-collapse: collapse ;
}

TABLE.hyo TH {
    border: 1px black solid;
    border-collapse: collapse ;
    background-color: #E0E0E0;
    padding: 3px 4px 1px 4px;
    white-space : nowrap; /* タイトルは改行しない */
}

TABLE.hyo TD {
    border: 1px black solid;
    border-collapse: collapse ;
    padding: 2px 4px 0px 4px;
}

TABLE.hyo TR.r0 {
    background-color: #FFD5D5;
}
TABLE.hyo TR {
    background-color: #FFFFFF;
}

TABLE.hyo TR.redtop {
    border-top:   2px red solid;
    border-left:  2px red solid;
    border-right: 2px red solid;
}
TABLE.hyo TR.redbottom {
    border-left:   2px red solid;
    border-right:  2px red solid;
    border-bottom: 2px red solid;
}
  </style>
</HEAD>
<BODY>
<TABLE class=hyo>
  <TR class="r0 redtop">
    <TD COLSPAN=4>あいうえお</TD>
  </TR>
  <TR class="redbottom">
    <TD>かきくけこ</TD>
    <TD>さしすせそ</TD>
    <TD>たちつてと</TD>
  </TR>
  <TR class="r0">
    <TD COLSPAN=4>なにぬねの</TD>
  </TR>
  <TR class="">
    <TD>はひふへほ</TD>
    <TD>まみむめも</TD>
  </TR>
  <TR class="r0">
    <TD COLSPAN=4>あいうえお</TD>
  </TR>
  <TR class="">
    <TD>かきくけこ</TD>
    <TD>さしすせそ</TD>
    <TD>たちつてと</TD>
  </TR>
  <TR class="r0 redtop">
    <TD COLSPAN=4>なにぬねの</TD>
  </TR>
  <TR class="redbottom">
    <TD>はひふへほ</TD>
    <TD>まみむめも</TD>
  </TR>
</TABLE>
</BODY>
</HTML>

TRにつけた色が枠線につくが、IEでは無視される。
あと、色とかの指定の強さが operaなどではTD>TABLEだけど、IEだけTABLE>TDっぽい。


原因判明
DOCTYPE宣言が無くて互換モードで動いてた