CSS | テーブルの枠線の色、太さを変更する

2023-05-272023-05-28CSS テーブル,CSS

CSSを利用してテーブル（表）の枠線の色、太さを変更する方法とサンプルコードを紹介しています。

テーブルの枠線の色、太さを変更する

テーブルの枠線の色、太さを変更するHTML、CSSのサンプルコードと動作サンプルです。

See the Pen CSS | Table width 100% and margin 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>

テーブルの枠線は、テーブル本体（table）、見出し部分（th）、セル（td）とそれぞれの指定が可能になっています。

枠線を重ねている場合でデザインに支障がない場合は、table、th、tdを一括指定する事が可能です。

デフォルトでテーブルの枠線が無効になっている場合は、borderプロパティで枠線の種類も指定しておく必要があります。

table, th, td {
	/* 枠線を重ねる */
	border-collapse: collapse;
	/* 枠線の指定 */
	border: solid 1px red;
	/* 枠線の色のみ指定 */
	border-color: red;
	/* 枠線の太さ */
	border-width: 2px;
}

それぞれの枠線デザインを変更する場合は個別に指定していきます。

table {
	/* 枠線を重ねる */
	border-collapse: collapse;
	/* 枠線の指定 */
	border: solid 1px red;
	/* 枠線の色のみ指定 */
	border-color: red;
	/* 枠線の太さ */
	border-width: 2px;
}

th {
	/* 枠線の指定 */
	border: solid 1px red;
	/* 枠線の色のみ指定 */
	border-color: red;
	/* 枠線の太さ */
	border-width: 2px;
}

td {
	/* 枠線の指定 */
	border: solid 1px red;
	/* 枠線の色のみ指定 */
	border-color: red;
	/* 枠線の太さ */
	border-width: 2px;
}