デザインによって、「テーブル（表）の境界線を透明にしたいな…」というシーンがあったりしますよね。
たとえばこんな見た目の表を作りたいとき。
セル同士の隙間が透明で、背景の色が見えています。
セル自体の背景色も、不透明度の低い白であることにより、より背景のグラデーションが引き立って見えますね。
この見た目をどのようにコーディングで実装するかというと、こんな感じ。
回答コード
注目するべきは、
table{
border-collapse: separate;
}の部分。
これは、セル同士の間にスキマを作る記述です。
セル同士の間にスキマを作る＋borderで線を引かないことで、あたかも境界線が透明になっているかのような見た目を作ることができます。
ちなみに separate は初期値なので、わざわざ指定しなくてもこのように作成できます。
ただ、テーブルって
table{
border-collapse: collapse;
}で作るパターンが多いように思うので、案外初期値である separate のことは忘れられがちかもしれません。
デザインに応じて、うまいことテーブルを扱いたいですね！
ちなみに
table{
border-collapse: separate;
}を使わなくても、border-collapse: collapse ＋ 境界線を透明のborder で区切るんじゃダメなの？と思ったそこのアナタ。
実際に試してみましょう。
線は透明になるけど、セル同士が区切られないので、意図した表示になりません。
「透明な線でセルを区切る」ではなく
「セル同士を離す」ことで、境界線を透明に見せましょう◎
良いテーブルライフを！
