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 | テストデータです。 | テストデータです。 |