表のセルの境界線を重ねる

border-collapse

CSSの書き方

border-collapse:値 ;

CSSの詳細情報
プロパティ名 border-collapse 読み方 ボーダー・コラプス
初期値 separate 意味 境界線の重合
separate/collapse
対象 table(表)要素
CSSレベル CSSレベル2 対応ブラウザ Windows MAC
継承 する IE 5.0以上/FF1.0/NS7.1/OP8.0 SF

解説

「border-collapse」プロパティは、セルに境界線を表示した場合の境界線の重なり方を指定するスタイルシートです。

通常では、境界線は互いに離れて表示されますが、境界線を重ねて(つぶして)表示させることもできます。

これは、HTMLのtble要素の属性「boder」を「border=”0″」とした時の表示と同じです。

値(separate)

「border-collapse:separate;」は初期値です。この場合は、境界線は離れて表示されます。

値(collapse)

「border-collapse:collapse;」とすると、境界線は重ねて表示されます。

CSS/HTMLサンプル

table { border-collapse:collapse; width:350px; border:1px solid #666666; background:#f6f6f6;}
td { border:1px solid #666666; padding:2px; }

表の境界線を重ねる サンプル

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!