ブログ

tableにpaddingやmarginを

テーブルを使う時にパディングやマージンをつけたい!と思うけどそれは無理。

ちゃんとした理由はあるんだろうけど、それはもうそういうものとして解決策を。

<table>
  <tbody>
    <tr>
      <th scope="col">タイトル1</th>
      <th scope="col">タイトル2</th>
      <th scope="col">タイトル3</th>
    </tr>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
    </tr>
    <tr>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
  </tbody>
</table>
table{
	border-collapse: separate;
    border-spacing: 0px 8px;
}
タイトル1 タイトル2 タイトル3
内容1 内容2 内容3
内容4 内容5 内容6

border-collapse: separate; でテーブルセルの間隔を指定できるようにして
border-spacing: 0px 8px; で隣り合ったテーブルセルの隙間を指定しています。

border-spacing: 8px; のようの数字を1つだけ指定したら上下左右同じ間隔
border-spacing: 0px 8px; の数字を2つ指定したら横方向・縦方向の間隔
を指定できます。