CSS | テーブルの背景色を透過、半透明にする方法

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

CSSでテーブルの枠線やテキストは透過させずに、背景色のみを透過、半透明にする方法を紹介しています。

テーブルの背景を透過、半透明にする

See the Pen CSS | Table caption position 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>

長年「Background-opacity」なるプロパティを待っている人も少なくないと思いますが、2023年現在のCSSでは実装されていません。

「opacity」では枠線やテキストなど要素全体が透過されてしまいますので、やはりrgba()で背景色を指定するのが現実的な方法になります。
このケースですと完全に透過する意味はありませんので半透明という事で、サンプルでは透過度に0.5を指定しています。

table {
	width:100%;
	color: white;
	background-color: rgba(0, 0, 0, 0.5);
}