質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2771閲覧

tableの上端を角丸にする方法

sanayaaan

総合スコア25

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/04/18 08:49

下記画像のように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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ボーダーを使えば角丸にできます
上なのでrounded-topでいけます

投稿2021/04/18 09:58

mouse_484

総合スコア759

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sanayaaan

2021/04/18 10:11

それがなぜかround-topがきかず困っております・・理由をお分かりになりますでしょうか。
gpsoft

2021/04/18 11:55

横から失礼します。 効いてないわけじゃなくて、背景色が、はみ出てるんだと思います。 .table_border_radiusに、overflow:hiddenを指定してみてください。
sanayaaan

2021/04/18 12:39

gpsoftさん ありがとうございます。おかげさまで解決いたしました。大変助かりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問