tableの角丸が反映されず、ボーダーも飛び出している

2024/04/09 16:17

このQ&Aのポイント

tableの角丸がうまく反映されず、ボーダーも飛び出しています。
h1タグは四方が角丸になっており、正しく表示されています。
問題はtable要素で、右下の角丸が表示されず、指定したボーダーも飛び出しています。EdgeとFirefoxでも同じ問題が発生しています。

ベストアンサー

tableに角丸がうまく反映されない

2023/04/09 15:24

```html index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hello Bulma!</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <section class="section"> <div class="container"> <h1 class="title foreground has-text-centered is-size-1"> 作業用タイマー </h1> <table class="table foreground is-size-1 is-fullwidth has-text-centered"> <tr> <td>現在時刻</td><td>hh:mm:ss</td> </tr> <tr> <td>残り時間</td><td>mm:ss</td> </tr> </table> </div> </section> </body> </html> ``` ```css style.css .foreground{ background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(2px); border-radius: 8px; border: none; border-right: 1px solid rgba(255, 255, 255, 0.5); border-bottom: 1px solid #fff; padding: 10px; color: #000 ; } html{ background-image: url('ubuntu-16-04-lts-Desktop-fondo.png'); background-size: cover; } ``` このコードについてなのですが、角丸がうまく反映されません。 h1タグはきちんと四方が角丸になっているのですか、tableは右下が角丸ではなく、右と下に指定した1pxのボーダーも飛び出しています。 edgeとfirefoxどちらも同じです。どなたか直し方を教えてください。あと関係ないですけどここでもそろそろmarkdownとシンタックスハイライト対応してくれませんかね?

shameimaru_aya
お礼率79% (63/79)

CSS
回答数4
ありがとう数4

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

4017B
ベストアンサー率73% (1304/1775)

2023/04/10 22:21 回答No.4

念の為、FireFoxとEdgeでも動作確認してみましたが、こちらの環境下では想定通りのレンダリング結果になっていますので。回答例で結果が改善しないとなると、質問者側の環境に依存する固有の問題が発生している可能性があります。或いは、質問者側からのソースコードの提示はなされていますが。この中の "style.css" に関しては、恐らく質問者側のローカル環境に設置されている固有のCSSファイルだと思われますので、この中に回答例の記述を妨害する様なスタイルが記述されている可能性があります。 MarkDown云々～と言うからには、質問者は中級者以上と推測しますので。全てのが初読み込みファイルへのアクセスが過不足無く担保されている、質問者自身の環境下でブラウザのデバックモードを用いて、当該部分のHTML要素に関係しているスタイルの記述番地を再確認してみてください。それで方向性が見えて来るかと思います。それでもどうやっても埒が明かないというのであれば。根本的にHTML構造を変えてみるのも1つの手です。現在は table で表示部分を作っていますが、これを div などに変更する等して、全く違うアプローチでHTML構造を作り直してしまう事により。未知のスタイル干渉？を物理的に回避する方法です。無論、その場合はスタイル指定に使うCLASS名なども全く別のモノを使います。これは最後の手段ですが、ダメ元でやってみる価値はあります。

質問者

お礼 2023/04/11 20:54

結局tableを使うのをやめてdivとflexboxを使うことにしました。その方がレスポンシブデザインの対応がやりやすそうでしたので。長文での回答ありがとうございました

その他の回答 (3)

retorofan
ベストアンサー率33% (328/975)

2023/04/09 18:30 回答No.3

＞tableは右下が角丸ではなく、右と下に指定した1pxのボーダーも飛び出しています。その個所を修正したコードを回答したのですが、そのまま貼付する場合は、元のCSSよりも下部にあれば反映される筈なのですが・・・。

質問者

お礼 2023/04/09 20:15

上書きして貼り付けましたけど… cssが読み込まれているかも確認しましたが… ダメでした

4017B
ベストアンサー率73% (1304/1775)

2023/04/09 17:36 回答No.2

とりあえず… .foreground { overflow: hidden; } ～を追記してみてください。それで「角丸」はキレイに表示される様になると思います。 CSSの細かい作法に関しては色々ありますが、それを解説し出すと長くなるので…(笑)。 P.S. MarkDownは確かに自分もあれば便利かなと思う時も無くは無いですが。プログラミング専門の掲示板とかならいざ知らず、利用者の9割9分が一般人なこのサイトで下手にMarkdownを導入しても、そもそも使い方も意味の分からない一般利用者による誤爆合戦になるだけだと思うので…まあこのままでイイかなと思います。

質問者

お礼 2023/04/09 20:10

ん～、、変わりませんね cssはキチンと設定されているようですが… 回答ありがとうございました。

retorofan
ベストアンサー率33% (328/975)

2023/04/09 16:45 回答No.1

下記のように修正して試してみてください。 <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>

質問者

お礼 2023/04/09 17:45

残念ながら改善されませんでした。ご回答ありがとうございました。

関連するQ&A

tableにtable。table同士の間隔を拡大
スクロールバーを付けるためにtable内にtableを入れました。中のtableとtableの間隔を開けたいです。言葉が少ないですが、その分画像で頑張って説明します。お願いいたします。 <style type="text/css"> #test0{ cellpadding: 2; width: 518px; background-color : #fff; border:1px solid #333; border-spacing:0; } #start{ width: 495px; height: 230; border-top:1px solid #333; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #ff0000; } .center{ width: 495px; height: 230; border-top: 0; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #ff0000; } #end{ width: 495px; height: 230; border-top: 0; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #40ee22; } td.test1{ background-color: #000000; color: #333333; } td.test2 img{ margin: 10px; } .test3{ font-size: 12px; padding: 5px; } td.test4{ text-align: center; } </style> <table id="test0"> <tbody> <tr> <td> <DIV style="height:400px; overflow:auto;"> <table id="start"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> <table class="center"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> <table id="end"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> </div> </td> </tr> </tbody> </table>
- ベストアンサー
- HTML
operaだとテーブルがなくなります
operaだテーブルがなくなります IEだと問題なく表示されるのにだれか助けてください style.css　　　body{background-color:#ffff99;margin:0px; font-size:large; font-family:"HG正楷書体-PRO","HG行書体","HGP行書体",cursive} .cur{font-family:cursive} .ser{font-family:serif} } table{background-color:#ff9933; 　width:100%; height:10%　　 }　　 .midori{background-color:#999933; width:100%; height:3.3%　 } 　　　　　　　ｈｔｍｌのほうは <HTML> <HEAD> <TITLE></TITLE> <link href="style.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <table><tr ><td></td></tr></table> <table class="midori"> <tr ><td></td></tr></table> <table style="height:6.7%"> <tr ><td></td></tr></table> <table style="position:absolute; left: 0px; bottom:8%; width:8%; height:100%; background-color:#993300"> <tr ><td></td></tr></table> <table style="position:absolute; bottom:0; height=8% " class="midori"> <tr ><td></td></tr></table> </BODY> </HTML> こんな感じなのですがどうしてでしょうか
- ベストアンサー
- HTML
レスポンシブ対応のテーブルの入れ子構造の実現
入れ子になっているテーブルのレスポンシブ対応をしたいです。ただし外側のテーブルはレスポンシブ対応で、横に並んでいたカラムが縦に並び変わるのですが、内側のテーブルはそのままの形を維持するようなCSSを実現したいのです。試しに作成してみたのですが、なかなかうまく動作しません。 CromeやFirefoxでは外側のテーブルは意図した通り切り替わるのですが、内側のテーブルがつぶれてしまいます。IE11やエッジでは外側のテーブルのdisplay:blockが継承されてしまい、内側のテーブルも同じように縦に切り替わってしまうのです。（display:unset;が効かない）勉強し始めたばかりの初心者で大変申し訳ございませんが、どなたかご教示いただけないでしょうか？ [ resptest.css] -- section table { width: 100%; } section th, section td { padding: 10px; border: 1px solid #ddd; } section th { background: #f4f4f4; } /*---------------------------------------------------- .resp_tab レスポンシブ対応したテーブル ----------------------------------------------------*/ .resp_tab th { width: 30%; text-align: left; } @media only screen and (max-width:800px){ .resp_tab { margin: 0 -10px; } .resp_tab th, .resp_tab td{ width: 100%; display: block; border-top: none; } .resp_tab tr:first-child th { border-top: 1px solid #ddd; } .resp_tab .normal_tab th ,.resp_tab .normal_tab td { width: 100%; display: unset; } } /*---------------------------------------------------- .normal_tab 普通のテーブル ----------------------------------------------------*/ .normal_tab{ width: 100%; border-collapse: collapse; } .normal_tab th{ width: auto; padding: 6px; text-align: left; vertical-align: top; color: #333; background-color: #eee; border: 1px solid #b9b9b9; } .normal_tab td{ width: auto; padding: 6px; background-color: #fff; border: 1px solid #b9b9b9; } -- [resptest.html] <!DOCTYPE html> <html lang="ja"> <head> <title>テーブルの入れ子テスト</title> <link rel="stylesheet" type="text/css" href="css/resptest.css"/> </head> <body> <section id="sec01"> <table class="resp_tab"> <tr> <td> <table class="normal_tab"> <tr> <th>head1</th> <th>head2</th> </tr> <tr> <td>data1</td> <td>data2</td> </tr> </table> </td> <td> <table class="normal_tab"> <tr> <th>head1</th> <th>head2</th> </tr> <tr> <td>data1</td> <td>data2</td> </tr> </table> </td> </tr> </table> </section> </body> </html>
- ベストアンサー
- CSS
横に並べたテーブル
200×200px程度のテーブルを複数（行数や列数はバラバラです）横に並べたいのですが、とりあえず、 <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>ページのタイトル</title> <style type="text/css">  </style> </head> <body> <div class="center"> <table class="a"> <tr><td class="a">AAAAAAAAAA</td></tr> <tr><td class="a">AAAAAAAAAA</td></tr> </table> <table class="a"> <tr><td class="a">BBBBBBBBBB</td></tr> <tr><td class="a">BBBBBBBBBB</td></tr> <tr><td class="a">BBBBBBBBBB</td></tr> </table> </div> </body> </html> という感じでdisplay:inlineで並べました。これだとIEでは普通に見えるのですが、Ffだと表示が崩れてしまいました。どこがいけないのかよくわかりません……。FfやNNでもちゃんと見えるようにしたいのですが、どうすればいいでしょうか。また、スタイルシートでもっといい他の方法があったら教えていただけると助かります。よろしくおねがいします。
- ベストアンサー
- HTML
入れ子にしたテーブルの罫線について
htmlとcssを学習し始めた者です。下記のような表を作りましたが罫線が2重になってしまいます。この罫線をダブらないようにしたいのです。一番左の列で言えば、外枠を残し、100の上、左、右を消し、200の左右を消し、300の左、右、下を消し一本の線で書かれた表にしたいと考えています。ご教示くださるようお願いいたします。 <LINK href="style.css" type="text/css" rel="stylesheet"> <table> <tr> <td> <table> <tr><td>100</td></tr> <tr><td>200</td></tr> <tr><td>300</td></tr> </table> </td> <td> <table> <tr><td>101</td></tr> <tr><td>201</td></tr> <tr><td>301</td></tr> <tr><td>401</td></tr> <tr><td>501</td></tr> </table> </td> <td>12345<br>67890 </td> <td> <table> <tr><td>102</td></tr> <tr><td>202</td></tr> <tr><td>302</td></tr> <tr><td>402</td></tr> </table> </td> </tr> </table> style.css table{ border-collapse: collapse; border: 1px solid #000000; line-height:130%; margin:auto; border-spacing:0; } td{ border: 1px solid #000000; padding:5px;}
- ベストアンサー
- HTML
●tableをCSSで書き直すには(HTMLソース付き)
いつも勉強させていただいております。今回は質問をさせていただけないでしょうか。上の表の枠のように少し立体感があるようにしたいと思います。これを、CSSにしたいのですが、border-styleをいろいろ試しても同じようになりません。どのようにすれば良いでしょうか？ <html> <STYLE TYPE="text/css">  </STYLE> <body bgcolor="#FF88FF"> <table width="270" border="1" cellpadding="0" cellspacing="0" > <tr> <td>こんな感じにしたいです。</td> <td>BBB</td> </tr> </table> <br> <table style="width:270px;" class="TTT"> <tr class="TTT"> <td class="TTT">なぜか、こんな感じになってしまいます。</td> <td class="TTT">DDD</td> </tr> </table> <br> </body> </html>
- 締切済み
- HTML
スクロール付きのテーブルで、内側に線を付ける方法
添付画像のようにテーブル内に枠を周りに付けて二重の枠にして、内側のテーブルとテーブルの間に破線をいれたいです。しかし、CSSで設定しても破線も枠も表示されません。こういう場合はどうすればいいのでしょうか？ <table id="j"> <tbody> <tr> <td> <DIV style="height:300px; overflow:auto;"> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> </div> </td> </tr> </tbody> </table> -----css------ #j{ cellpadding: 2; width: 520; background-color : #ffe3c8; border:1px solid #333; border-spacing:0; } } .t{ width: 500; height: 100; border:1px solid #333; } td{ cellspacing: 0; border-collapse: collapse; border-spacing:0; }
- ベストアンサー
- HTML
cssで、1行2段のtableを記述するには？
cssで、1行2段のtableを記述するには？ → htmlのページに以下を挿入しました。 <table> <tr> <td width="2"></td> <td width="588"></td> </tr> </table> → htmlのページの<head>と</head>の間に以下を挿入しました。 <link rel="stylesheet" type="text/css" href="table.css"> → table.cssファイルを、onimotsuさんの指示に従い、以下のように記述しました。 TABLE{width : 640px;border-width : 0px 0px 0px 0px; padding-top : 0px;padding-left : 0px;padding-right : 0px; padding-bottom : 0px; background-color : #FFFFFF;} → table.cssファイルに以下を挿入するにはどうしたらいいのでしょうか？いろいろ試しましたが、うまくいきません。 <tr> <td width="2"></td> <td width="588"></td> </tr> → うまく挿入できれば、htmlのページのtableの項は次のようにすっきりとなります。 <table> </table> よろしくおねがいします。
- ベストアンサー
- その他（プログラミング・開発）
CSSで角丸テーブル
CSSでDIV要素を使って入れ子し、角の丸いテーブルを作っているのですが、なぜか誤差が出てしまいます。 CSSのソースは次のようなものです。 table（2）.gifは角丸テーブルの画像です画像サイズ：横440px 縦11px .box-center-start { width: 440px; background: url(image/table.gif); background-repeat: no-repeat; } .box-center { width: 440px; background-color: white; margin: 20px 10px 20px 8px; float: left; } .box-center2 { width: 440px; background-color: white; padding: 0px 10px 10px 10px; border-right: 1px solid gray; border-bottom: 1px dashed gray; border-left: 1px solid gray; } .box-center3 { width: 440px; background-color: white; padding: 10px 10px 0px 10px; border-right: 1px solid gray; border-left: 1px solid gray; } .box-center-end { width: 440px; background: url(image/table2.gif); background-repeat: no-repeat; } このように記述し、HTMLに <DIV class="box-center"> <DIV class="box-center-start"></DIV> <DIV class="box-center2"> ～内容 </DIV> <DIV class="box-center3"> ～内容 </DIV> <DIV class="box-center-end"></DIV> と打ってもなぜか綺麗に表示されません。クラス「box-center-start（end）」の下に、少し余白が入ってしまうのです。（10pxほどの）何方か助言お願いしますm( _ _ )m
- 締切済み
- HTML
css テーブルについて
よろしくお願いします。 2だけを300pxと100pxに2分割にできないでしょうか。 <div class="aa"> <table> <tr> <th>1</th> <td>2</td> </tr> <tr> <th>1</th> <td>1</td> </tr> </table> </div> .aa table { width: 500px; height: 100px; border: 1px #000000 solid; border-collapse: collapse; } .aa th { width: 100px; border: 1px #000000 solid; } .aa td { width: 400px; border: 1px #000000 solid; }
- ベストアンサー
- CSS

tableの角丸が反映されず、ボーダーも飛び出している

tableに角丸がうまく反映されない