tableで特定の場所に、border-collapseを使用して下線を引きたい。

Question

Cssのtable-collapseを使用して、要素の下線を結合させて表示したいと思い、
下記のようなコードを作成しました。

<table>
  <caption>test</caption>
<thead>
  <tr>
    <th></th>
    <th class="test">名前</th>
    <th class="test">メールアドレス</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th>1</th>
    <td>ほげ太朗</td>
    <td>[e-mail]</td>
  </tr>
  <tr>
    <th>2</th>
    <td>ふが次郎</td>
    <td>[e-mail]</td>
  </tr>
</tbody>
</table>

thの”名前”と”メールアドレス”にあたる部分に下線を引きたいと思い下記のように
CSSを作成しました。

 .test {
  border-collapse: collapse;
  border-bottom: solid 1px red;
  line-height: 1.5;
}

コードを実行したところ、下記のイメージのように
border-collaseが効いておらず、下線が離れたままの状態です。

実行イメージの離れている下線同士を結合させて、表示させたいのですが可能でしょうか？
ご教示いただけますと幸いです。

Answer 1

table {border-collapse:collapse;}
thead th{border-bottom:1px solid red}

Comments

[takochan1192]

table要素全体的に、border-collapseを指定するのですね。
問題なくできました。
何度もご回答いただきましてありがとうございます。