テーブルの行に対して、ボーダーを適用する方法

Question

テーブルのボーダーの設定について、実装できない箇所があり、ご質問させて貰いました。

<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>

table{
  border-collapse:separage;
}
thead{
  border:1px solid black;
  background-color:aqua;
}
tbody{
  background-color:blue;
}

こちらのコードを実行すると、以下のような表示となります。

こちらですが、本来、border-collapse:separage;のスタイルは適用したくなかったのですが、border-radiusを適用するために、設定しているといった状況です。
実現したい内容としましては、一番上の行の<thead>内の<tr>の行に対して、両端のみ角丸を設定したい考えています。
しかし、現状、<thead>内の<tr>にはボーダーを適用することができず、スタイルを適用できない状況です。
こちらを実現する方法がありましたら、ご助言頂けましたら幸いです。

Answer 1

separageのスペル間違ってます。

thに指定するのは問題ありですか？

table {
  /* border-collapse: separate; */
  border-collapse: collapse;
}

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

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

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

Comments

[jjj001]

ありがとうございます。
本当に困っていたので、助かりました。