TableのCellSpacingをスタイルシートで変更する - CSSでテーブルの枠線を1重にする
概要
HTMLタグではTableのセル間に余白を開けない場合は、tableタグの属性値として
cellspacing="0" を指定すると余白が開かなくなります。同様の処理をCSSで表現する場合のコードを紹介します。
セル間に余白を開けない場合
書式
border-collapse:collapse;
Tableのセル間に余白を開けない場合は、border-collapse:collapse; を使います。
コード
下記のHTMLファイルを作成します。
<table style="border-collapse:collapse; border-spacing:0px; border:1px solid #FF4040">
<tr>
<td style="background-color:#80FF80;margin:0px;padding:0px;border:1px solid #4040FF;">ABC</td>
<td style="background-color:#80FF80;margin:0px;padding:0px;border:1px solid #4040FF;">ABC</td>
<td style="background-color:#80FF80;margin:0px;padding:0px;border:1px solid #4040FF;">ABC</td>
</tr>
<tr>
<td style="background-color:#80FF80;margin:0px;padding:0px;border:1px solid #4040FF;">ABC</td>
<td style="background-color:#80FF80;margin:0px;padding:0px;border:1px solid #4040FF;">ABC</td>
<td style="background-color:#80FF80;margin:0px;padding:0px;border:1px solid #4040FF;">ABC</td>
</tr>
</table>
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図のテーブルの画面が表示されます。
セル間に余白を開ける場合
書式
Tableのセル間に余白を開ける場合は、border-collapse:separate; を使います。セル間の間隔は border-spacing で指定します。
コード
下記のHTMLファイルを作成します。
<table style="border-collapse:separate; border-spacing:8px; border:1px">
<tr>
<td style="background-color:#80FF80;">ABC</td>
<td style="background-color:#80FF80;">ABC</td>
<td style="background-color:#80FF80;">ABC</td>
</tr>
<tr>
<td style="background-color:#80FF80;">ABC</td>
<td style="background-color:#80FF80;">ABC</td>
<td style="background-color:#80FF80;">ABC</td>
</tr>
</table>
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図のテーブルの画面が表示されます。
セル間に余白を開け、枠線を表示する場合
コード
下記のHTMLファイルを作成します。
<table style="border-collapse:separate; border-spacing:8px; border:1px">
<tr>
<td style="background-color:#80FF80;border:1px solid #4040FF;">ABC</td>
<td style="background-color:#80FF80;border:1px solid #4040FF;">ABC</td>
<td style="background-color:#80FF80;border:1px solid #4040FF;">ABC</td>
</tr>
<tr>
<td style="background-color:#80FF80;border:1px solid #4040FF;">ABC</td>
<td style="background-color:#80FF80;border:1px solid #4040FF;">ABC</td>
<td style="background-color:#80FF80;border:1px solid #4040FF;">ABC</td>
</tr>
</table>
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図のテーブルの画面が表示されます。
実装例 (罫線を一重で1ピクセル幅で表示する)
コード
罫線を一重で1ピクセル幅で表示するコードです。
.MyTable{
border-collapse:collapse;
}
.MyTable tr td {
border:1px solid #0094ff;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="CssTableCollapse.css" type="text/css" />
</head>
<body>
<table class="MyTable">
<tr>
<td>ペンギンクッキー</td>
<td>\380</td>
<td>250g</td>
</tr>
<tr>
<td>しろくまキャンディー</td>
<td>\150</td>
<td>80g</td>
</tr>
<tr>
<td>くじらポテトチップ</td>
<td>\210</td>
<td>180g</td>
</tr>
</table>
</body>
</html>
解説
HTMLで記述したテーブルを MyTable クラスに指定しています。MyTable クラスのスタイルを定義するCSSでは、MyTableクラスのborder-collapse プロパティにに Collapse を設定しています。この設定によりセル間に余白が開かない設定になります。
また、下位要素セレクタを利用し MyTable クラスの子要素の tr 要素の子要素の td タグに対してスタイルを設定します。
border:1px solid #0094ff;のプロパティを設定することでセルの境界線を表示し一重の罫線で表示します。
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。テーブルが表示され、1ピクセルの罫線が一重で表示されていることが確認できます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
