Bootstrap4でテーブルを角丸表示させる

● Bootstrap4でテーブルを角丸表示させる

cssクラス table_border_radius を作成してテーブルに割り当てます。

<table class="table table-bordered table_border_radius">
	<tr>
		<td>TEST</td>
		<td>テストデータです。</td>
		<td>テストデータです。</td>
	</tr>
	<tr>
		<td>TEST</td>
		<td>テストデータです。</td>
		<td>テストデータです。</td>
	</tr>
	<tr>
		<td>TEST</td>
		<td>テストデータです。</td>
		<td>テストデータです。</td>
	</tr>
</table>

Bootstrap4でテーブルを角丸表示させるCSS

.table_border_radius {
  border: 1px solid red;
  border-radius: 5px;
  border-spacing: 0;
  border-collapse: separate;
}
.table_border_radius tr td {
	border: none;
	border-bottom: 1px solid black;
	border-right: 1px solid black;
}
.table_border_radius tr td:first-child {
  border-left: none;
}
.table_border_radius tr td:last-child {
  border-right: none;
}
.table_border_radius tr:first-child td {
  border-top: none;
}
.table_border_radius tr:last-child td {
  border-bottom: none;
}
TEST テストデータです。 テストデータです。
TEST テストデータです。 テストデータです。
TEST テストデータです。 テストデータです。
No.1327
10/27 22:48

edit