CSS | テーブルの背景を網掛けにする方法

2023-05-292023-06-07CSS テーブル,CSS

CSSでテーブルの背景を背景色ではなくエクセルなどで利用されている網掛け状にする方法とサンプルコードを紹介しています。

テーブルの背景を網掛けにする

See the Pen CSS | Equal Table column widths by yochans (@yochans) on CodePen.

<table>
	<thead>
		<tr>
			<th>name</th>
			<th>Value</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Apple</td>
			<td>100</td>
		</tr>
		<tr>
			<td>Banana</td>
			<td>100</td>
		</tr>
		<tr>
			<td>Pine</td>
			<td>100</td>
		</tr>
	</tbody>
</table>

サンプルでは、見出しとなるth要素に対して、網掛けにした背景を「background-image」プロパティにてグラデーションデザインを実装する「linear-gradient」を指定して設定しています。

th {
	background-image: linear-gradient(rgba(0, 0, 0, 0.1) 2px, transparent 2px),
                    linear-gradient(90deg, rgba(0, 0, 0, 0.1) 2px, transparent 2px);
	background-size: 4px 4px;
}

上記サンプルコードは、シンプルな格子柄をデザインしていますが、CSSグラデーションを使って様々な網掛けをデザインできます。
関連：CSS | いろいろなチェック柄背景のサンプル集 | ONE NOTES