フロントのエンド

Web開発をがんばりたいブログ

CSS

marginが効かないtable-cellにborder-spacingで隙間を作る

by:
16/09/06

横並びのタブとかリストメニューなんかをtable-cellで組んだときに、隙間を空けたい気分になる。

問題点:table-cellはマージン効かない。

border-spacingでやりたいこと

スポンサーリンク

コードリファレンス「 border-collapse 」「 border-spacing 」

border-collapse

border-collapse: separate;

CSS の border-collapse プロパティは、表の 境界線 (border) の形式を選びます。このプロパティは、表のセルの外見やスタイルに大きく影響します。

形式文法: collapse | separate

border-collapse – CSS | MDN

tableのcell同士の隣接仕方を制御するプロパティーっぽい。

初期値はseparate

なので、わざわざ初期値をしているするのアホっぽいけども、何かのタイミングで’collapse’を指定してたりする場合、戻して指定し直す必要がある。

ちなみにちなみに、collapseは英語で、崩壊、倒壊、の意味。だからどうなんだって感じでちょっとニュアンスがわからなかった。

Google 翻訳

border-spacing

border-spacing: 10px 0;

値が2つ入っている場合のあつかいは

border-spacing: length              /* 1 値構文 */
border-spacing: horizontal vertical /* 2 値構文 */

よこ、たて、って並び。

CSS の border-spacing プロパティは、隣り合うセルのボーダー同士の距離を決めます(separate 形式のボーダー専用

まとめ

親であるtableもしくはinline-tableにかけないと、子要素のtable-cellは離れない。

コメントを残す