手間をかけずにセルの間隔を広げる方法

ブログBlog

こんばんは、東郷です。

tableタグで文書やテンプレートを作成する場合、

table全体のセルの間隔が詰まって段落や文字が見えにくい時はないでしょうか？

paddingかmarging等では却ってレイアウトが崩れることもあり、

手間をかけずにセルの間隔を広げる方法を調べたところ

以下のcssプロパティで解決したのでご紹介します。

html


<table>
  <tr><th>項目1</th><td>文章1</td></tr>
  <tr><th>項目2</th><td>文章2</td></tr>
  <tr><th>項目3</th><td>文章3</td></tr>
</table>

css


table {
  border-collapse: separate;
  border-spacing: 5px;
}

border-collapseとは隣接するセルの間隔を指定するプロパティで、

値にseparateを指定すると隣接するボーダーの間隔が広がります。(隣接するボーダーを重ねたい場合はcollapseを指定)

border-spacingプロパティとはボーダーの間隔をどの位広げるかを指定するプロパティで、

border-collapseの値にseparateを指定した場合のみ有効になります。

セルの間隔を上下左右で変更したい場合は値を2つ指定します。