下記画像のようにtableを上端だけ角丸に実装をしたいのですがどのようにCSSを加えるといいのかわからず困っています。
ちなみにbootstrapを使用してこの見た目の実装は難しいのでしょうか・・?
お分かりになる方がいらっしゃいましたらお願いいたします。
html
1<div class="col-4 offset-8"> 2 <table class="table table-hover text-vertical-middle w-40 table_border_radius font-1"> 3 <thead> 4 <tr class="text-white table-active table-top"> 5 <th>aaa</th> 6 <th>aaa</th> 7 <th>aaa</th> 8 <th>aaa</th> 9 <th>aaa</th> 10 </tr> 11 </thead> 12 <tbody> 13 <tr class="table-active"> 14 <td>b</td> 15 <td>b</td> 16 <td>b</td> 17 <td>b</td> 18 <td>b</td> 19 </tr> 20 <tr class="table-active"> 21 <td>c</td> 22 <td>c</td> 23 <td>c</td> 24 <td>c</td> 25 <td>c</td> 26 </tr> 27 </tbody> 28 </table> 29 </div>
css
1.table-top { 2 background-color: #21aca8; 3} 4 5.table_border_radius { 6 border: 2px solid #14a2b8; 7 border-radius: 15px; 8 border-spacing: 0; 9 border-collapse: separate; 10} 11 12.table_border_radius th { 13 border: none; 14 border-right: 2px solid white; 15} 16 17.table_border_radius th:last-child { 18 border-right: none; 19} 20 21.table_border_radius tr td { 22 border: none; 23 border-bottom: 2px solid white; 24 border-right: 2px solid white; 25} 26.table_border_radius tr td:first-child { 27 border-left: none; 28} 29.table_border_radius tr td:last-child { 30 border-right: none; 31} 32.table_border_radius tr:first-child td { 33 border-top: none; 34} 35.table_border_radius tr:last-child td { 36 border-bottom: none; 37} 38
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/04/18 10:11
2021/04/18 11:55
2021/04/18 12:39