border-spacingで表の行列間の余白を調整する
この前初めて使った時に少しハマったのでまとめておく。
何をしたいのか
表の行列間に余白を作りたい。↓のように行と列で別々の余白を指定したい。
marginやpaddingはダメなのか
w3cによると
all elements except internal table elements
marginは効かない模様。
paddingはtdに指定できるので、これが解決策となる場合もある。
border-spacingを使う
表の行列間の余白を指定するために存在するプロパティ。行、列を個別に指定することも可能。
table {
border-spacing: 1em .5em;
border-collapse:separate;
}
border-collapse: collapseだとborder-spacingは効かないので注意。
border-spacingで表の位置がずれる問題
border-spacingは行間、列間だけでなく周りにも適用されるので、表の表示位置がずれる問題があるが、nagative marginで解決できる。
table {
margin-top: -0.5em;
margin-left: -1em;
}
