table tr のプロパティ

table

table タグのプロパティを調べます。もとの表です。（ボーダーだけいれます）

border-collapse: separate; / border-spacing

border-spacing でセル間の幅を調整します。

table.doubutsu1 {
    border-collapse: separate;  /* default */
    border-spacing: 10px;       /* ieでは無効 */
}

border-spacing でセル間の幅を０とすると、

table.doubutsu1 {
    border-collapse: separate;  /* default */
    border-spacing: 0px;        /* ieでは無効 */
}

border-collapse

border-collapse を使えばボーダーを重ねることができます。

table.doubutsu3 {
    border-collapse: collapse;
    border:solid 1px #999999;
}

padding

table タグのパディングは予想どおり働きます。

table.padding1 {
    padding:6px 10px 3px 20px;    /* ieでは無効 */
}

tr への設定

margin,paddingが無効というのは自然かも知れない。border は td へ継承されるという可能性もあるのだが…。背景色は td に継承されている。

table.doubutsu1 tr {
    border:solid 1px #ff9999;   /* 無効 */
    margin:5px;                 /* 無効 */
    padding:6px 10px 3px 20px;  /* 無効 */
    background-color:#ccccff;
}