今回は、Table要素のborder設定についてまとめます。
何年CSSを書いていても、何故かこのborder設定だけがいつまで経っても覚えられないのが謎です。
border-spacing
隣り合うセルの境界同士の間隔を指定するプロパティです。
See the Pen table-01 by subaru (@subaru_works) on CodePen.
セルにborderを設定すると、このようにセルとセルの間に隙間が空きます
border-spacing で隙間の幅を指定すると、以下のようにセル同士の間隔を指定することができます
See the Pen table-01 by subaru (@subaru_works) on CodePen.
border-collapse
そもそも、セル同士の隙間を無くしたい場合がほとんどです。
そんな時は border-collapse を利用します。
See the Pen table-02 by subaru (@subaru_works) on CodePen.
border-collapse: collapse; とすることで
間隔がなくなり、セル間のborderが1本になりました
ちなみに、標準の設定は border-collapse: separate; となります