テーブルに付与した一部の背景色を無効にしたいです

Question

テーブルのデザインについて、解決出来ない問題があり、アドバイス頂きたく質問させて貰いました。

詳細なコードは以下になります。

<div class="table-content">
<table>
<thead>
  <tr>
    <th>テスト1</th>
    <th>テスト2</th>
  </tr>
</thead>
<tbody>
<tr>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
</tr>

</tbody>

</table>
</div>

 .table-content{
   background-color:green;
   height:140px;
   width:180px;
 }

table{
  border-collapse:collapse;

}
thead{
  background-color:aqua;
}
tbody{
  background-color:blue;
}

th {
    padding: 1em;
    background-color: aqua;
  }

  th:first-child {
    border-radius: 10px 0 0 0;
  }

  th:last-child {
    border-radius: 0 10px 0 0;
  }

こちら現状、以下のようなスタイルになっているのですが、上の両端に緑の枠がborder-radiusを設定した分だけはみ出てしまっているのですが、こちらを改善する方法がありましたら教えて頂きたいです
![]

こちらのコードですが、jsfiddleにて、アップロードしており再現確認可能な状態となっています。
どなたか、ご助言いただけましたら幸いです。

Answer 1

jsfiddle を拝見しましたが、Firefox ではそもそも border-radius が効いていないようでした。
Chrome では、以下のようにすればいいのかもしれません。

.table-content {
    background-color: green;
    height: 140px;
    width: 180px;
    border-radius: 10px 10px 0 0;
}

Comments

[jjj001]

ありがとうございます。
ご回答頂いた内容で、解決出来ました。
Firefoxでの挙動に関しましては、注意してみます