CSS | シンプルな下線のみのテーブルデザイン

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

シンプルな下線のみのテーブルのCSSデザインサンプルを紹介しています。

シンプルな下線のみのテーブル

CSSでtd要素に下線を引いたシンプルなテーブルのデザインの表示サンプルとサンプルコードになります。

See the Pen CSS | Overlap Table borders 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>

行の下側のみに下線を引くにはtd要素に対して、「border-bottom」プロパティで枠の種類、太さ、色を指定していきます。

既にテーブルのCSSが適用されていて、枠線がある場合は「border: none」で一度消しておきます。

table {
/* 	border-collapse: collapse; */
	width:100%;
}

/* table, th, td {
border: none;
} */

th {
	padding: 5px;
	text-align: left;
}

td {
	padding: 5px;
	border-bottom: solid 1px lightgray;
}