- ベストアンサー
tableの角丸が反映されず、ボーダーも飛び出している
- tableの角丸がうまく反映されず、ボーダーも飛び出しています。
- h1タグは四方が角丸になっており、正しく表示されています。
- 問題はtable要素で、右下の角丸が表示されず、指定したボーダーも飛び出しています。EdgeとFirefoxでも同じ問題が発生しています。
- shameimaru_aya
- お礼率79% (63/79)
- CSS
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
念の為、FireFoxとEdgeでも動作確認してみましたが、こちらの環境下では想定通りのレンダリング結果になっていますので。回答例で結果が改善しないとなると、質問者側の環境に依存する固有の問題が発生している可能性があります。或いは、質問者側からのソースコードの提示はなされていますが。この中の "style.css" に関しては、恐らく質問者側のローカル環境に設置されている固有のCSSファイルだと思われますので、この中に回答例の記述を妨害する様なスタイルが記述されている可能性があります。 MarkDown云々～と言うからには、質問者は中級者以上と推測しますので。全てのが初読み込みファイルへのアクセスが過不足無く担保されている、質問者自身の環境下でブラウザのデバックモードを用いて、当該部分のHTML要素に関係しているスタイルの記述番地を再確認してみてください。それで方向性が見えて来るかと思います。 それでもどうやっても埒が明かないというのであれば。根本的にHTML構造を変えてみるのも1つの手です。現在は table で表示部分を作っていますが、これを div などに変更する等して、全く違うアプローチでHTML構造を作り直してしまう事により。未知のスタイル干渉？を物理的に回避する方法です。無論、その場合はスタイル指定に使うCLASS名なども全く別のモノを使います。これは最後の手段ですが、ダメ元でやってみる価値はあります。
その他の回答 (3)
- retorofan
- ベストアンサー率34% (435/1276)
＞tableは右下が角丸ではなく、右と下に指定した1pxのボーダーも飛び出しています。 その個所を修正したコードを回答したのですが、 そのまま貼付する場合は、元のCSSよりも 下部にあれば反映される筈なのですが・・・。
お礼
上書きして貼り付けましたけど… cssが読み込まれているかも確認しましたが… ダメでした
- 4017B
- ベストアンサー率73% (1336/1814)
とりあえず… .foreground { overflow: hidden; } ～を追記してみてください。それで「角丸」はキレイに表示される様になると思います。 CSSの細かい作法に関しては色々ありますが、それを解説し出すと長くなるので…(笑)。 P.S. MarkDownは確かに自分もあれば便利かなと思う時も無くは無いですが。プログラミング専門の掲示板とかならいざ知らず、利用者の9割9分が一般人なこのサイトで下手にMarkdownを導入しても、そもそも使い方も意味の分からない一般利用者による誤爆合戦になるだけだと思うので…まあこのままでイイかなと思います。
お礼
ん～、、変わりませんね cssはキチンと設定されているようですが… 回答ありがとうございました。
- retorofan
- ベストアンサー率34% (435/1276)
下記のように修正して試してみてください。 <style> .foreground{ background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(2px); /* border-radius: 8px; */ border-radius: 12px; border: none; border-right: 1px solid rgba(255, 255, 255, 0.5); border-bottom: 1px solid #fff; /* padding: 10px; */ padding: 10px 9px 9px 10px; color: #000 ; } </style>
お礼
残念ながら改善されませんでした。 ご回答ありがとうございました。
お礼
結局tableを使うのをやめてdivとflexboxを使うことにしました。 その方がレスポンシブデザインの対応がやりやすそうでしたので。 長文での回答ありがとうございました