テーブルを使う時にパディングやマージンをつけたい!と思うけどそれは無理。
ちゃんとした理由はあるんだろうけど、それはもうそういうものとして解決策を。
<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つ指定したら横方向・縦方向の間隔
を指定できます。