カテゴリー
HTML

border-collapseプロパティについて知ろう

この章では隣り合うセルのボーダーを重ねたり、離して表示するborder-collapseについて説明します。414 では例をみてみましょう。415416417418 table要素のCSSに419を指定すると隣接するセルのボーダーを重ねて表示します。
上の例は隣り合うセルを重ねていますが、重なり合う箇所は420の中でいずれかの設定された「幅、スタイル、色」が優先されて表示されることになります。422423424425426 結果は以下の通りです。427 例ではthとtdのボーダーが重なっていますが, 428が3pxで同じなので、ボーダーの種類で決めるのですがthのsolidのほうが優先順位が上なのでthのボーダーが優先されます。
thとtableのボーダーが重なっているところは色だけが違うので優先順位4の法則によりth要素のほうが優先順位は高くなります。
tdとtableのボーダーが重なっているところは太さが同じでスタイルと色が違いますが、solidのほうが優先順位が高いので、tableのスタイルが優先されます。