サンプル01は、色とその色の16進表記を並べた表です。table要素を使用し、次のCSSソースのようにセルの間隔を7pxあけています。しかし、すべて等間隔に並んでしまって色と16進表記の関連が分かり辛いので、これを関連するセルどうし（左から1番目と2番目、3番目と4番目、5番目と6番目）を近づけて表示したい、と考えたときの対策です。

サンプル01のCSSソース

table {
	border-collapse: separate;   //セルの罫線を離して表示
	border-spacing: 7px;   //間隔は7px
  }

 

border-spacingプロパティで、「border-spacing:7px 9px 7px 3px」のような指定ができれば良いのですが、次のCSSソースのように「border-spacing:左右サイズ 上下サイズ」しかできない仕様になっています。

サンプル02のCSSソース

table.sample2 {
	border-spacing: 3px 7px;
	}

 

そこで、左右の方向のみやや大きめにスペースをとり、左から2番目、4番目、6番目のセルのみ、「position:relative」を使って強制的に左に移動させてみました。2番目、4番目、6番目のセルの選択には、「:nth-child疑似クラス」を使っています。

サンプル03のCSSソース

table.adjust {
	border-spacing: 9px 7px;
	}
table.adjust td:nth-child(2n) {
	position: relative;
	left: -6px;
	}