Firefoxだけborder-radiusが効かない(table内)

困っていること

table > thead > tr > thにて下記のように設定、しかし画像のような結果になる
first-child {border-radius: 15px 0 0 0;}
last-child {border-radius: 0 15px 0 0;}

▼chrome

▼firefox

調べてみたこと

ぐぐってみると大体理由が「border-collapse: collapseに設定されていないため」でしたが試してみても変化がありませんでした

その他

IE11,10 ・ Edge　・ Operaではborder-radiusは効いています

追記

-webkit-border-top-left-radius: 15px;
-moz-border-radius-topleft: 15px;
border-radius-topleft: 15px;

-webkit-border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
border-radius-topright: 15px;

上記コードに変更後は画像のようになり、chromeでもfirefoxでもborderが効かない

コードの追記

html

<table>
	<thead>
		<tr>
			<th>本文</th>
			<th>リミット</th>
			<th>その他</th>
		</tr>
	</thead>

	<tbody>
		<tr>
			<td>本文内容</td>
			<td>リミット内容</td>
			<td>その他内容</td>
		</tr>
	</tbody>
</table>

css

table {
    box-sizing: border-box;
    width: 100%;
    line-height: 0;
    border-bottom: none;
    border-collapse: collapse;
    border-spacing: 0;

    > thead {
      > tr {
        height: 30px;
        background-color: #f1f1f1;

        > th {
          line-height: 14px;
          padding: 8px 7px 8px 4px;
          text-align: left;
          text-decoration: none;

          &:first-child {
            padding-left: 8px;
            -webkit-border-top-left-radius: 15px;
            -moz-border-radius-topleft: 15px;
            border-radius-topleft: 15px;
          }

          &:last-child {
            -webkit-border-top-right-radius: 15px;
            -moz-border-radius-topright: 15px;
            border-radius-topright: 15px;
          }
        }
      }
    }

Bernadotte

2019/04/12 10:56

ソースの記述がこれだけだと正直回答のしようがないので、該当箇所のHTMLコードとCSSを提示してもらえると回答が付きやすいと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

CSS
1-webkit-border-top-left-radius: 15px;
2-moz-border-radius-topleft: 15px;
3border-radius-topleft: 15px;
4
5-webkit-border-top-right-radius: 15px;
6-moz-border-radius-topright: 15px;
7border-radius-topright: 15px;

上の追記でできるか確認して頂いてもよろしいでしょうか。

追記

まず初めに私が掲載したコードに誤りがあったのでお詫び申し上げます。

誤

CSS
1-webkit-border-top-left-radius: 15px;
2-moz-border-radius-topleft: 15px;
3border-radius-topleft: 15px;
4
5-webkit-border-top-right-radius: 15px;
6-moz-border-radius-topright: 15px;
7border-radius-topright: 15px;

border-radius-topleft: 15px; => border-top-left-radius: 15px;
border-radius-topright: 15px; => border-top-right-radius: 15px;

正

CSS
1-webkit-border-top-left-radius: 15px;
2-moz-border-radius-topleft: 15px;
3border-top-left-radius: 15px;
4
5
6-webkit-border-top-right-radius: 15px;
7-moz-border-radius-topright: 15px;
8border-top-right-radius: 15px;

でもFireFoxでは動きません。
理由は分かりませんが、FireFoxではth(又は td)に対してのボーダー関係がかなりややこしいそう。
tableタグに対して適用したらどうでしょうか？
それならできました。

追記② 参考画像

追記③ scss追記

変更点

左上、右上の丸め(border-radius)をtableに適用
その子要素がtableを丸い部分をはみ出てしまうので、tableからはみ出たものを隠す
よってtableに対してさらに「overflow: hidden;」

絶対に動きます・・・絶対に・・・きっと・・・

scss
1table {
2    box-sizing: border-box;
3    width: 100%;
4    line-height: 0;
5    border-bottom: none;
6    border-collapse: collapse;
7    border-spacing: 0;
8    overflow: hidden;
9    -webkit-border-top-right-radius: 15px;
10    -moz-border-radius-topright: 15px;
11    border-top-right-radius: 15px;
12    -webkit-border-top-left-radius: 15px;
13    -moz-border-radius-topleft: 15px;
14    border-top-left-radius: 15px;
15
16    > thead {
17      > tr {
18        height: 30px;
19        background-color: #f1f1f1;
20
21        > th {
22          line-height: 14px;
23          padding: 8px 7px 8px 4px;
24          text-align: left;
25          text-decoration: none;
26
27          &:first-child {
28            padding-left: 8px;
29          }
30
31          &:last-child {
32          }
33        }
34      }
35    }
36  }
37