tableタグのtrにボーダー（border）を引く方法

こんにちは、俺バカです。

tableタグのtrにボーダーを引きたいけどなんか反映されないことってありませんか？

当記事ではtableタグにボーダーを引く方法を書いていきたいと思います。

テーブルタグにのtrにボーダーを引く方法

このようなテーブルがあるとします。

<style>
  table {
    border: 1px solid #000;
  }
  td {
    width: 50px;
  }
</style>
<table>
  <tr>
    <td>AA1</td>
    <td>BB1</td>
    <td>CC1</td>
  </tr>
  <tr>
    <td>AA2</td>
    <td>BB2</td>
    <td>CC2</td>
  </tr>
  <tr>
    <td>AA3</td>
    <td>BB3</td>
    <td>CC3</td>
  </tr>
</table>

上記のコードだとこのようなテーブルになります。

行ごとにボーダーを引きたいので、trにborder-bottomを引いてみよう。

<style>
  table {
    border: 1px solid #000;
  }
  td {
    width: 50px;
  }
  /* 追記 */
  tr {
    border-bottom: 1px solid #000;
  }
</style>
<table>
  <tr>
    <td>AA1</td>
    <td>BB1</td>
    <td>CC1</td>
  </tr>
  <tr>
    <td>AA2</td>
    <td>BB2</td>
    <td>CC2</td>
  </tr>
  <tr>
    <td>AA3</td>
    <td>BB3</td>
    <td>CC3</td>
  </tr>
</table>

反映されん！！！

こんな時は、tableタグに border-collapse: collapse を指定します。

<style>
  table {
    border-collapse: collapse; /* 追記 */
    border: 1px solid #000;
  }
  td {
    width: 50px;
  }
  tr {
    border-bottom: 1px solid #000;
  }
</style>

<table>
  <tr>
    <td>AA1</td>
    <td>BB1</td>
    <td>CC1</td>
  </tr>
  <tr>
    <td>AA2</td>
    <td>BB2</td>
    <td>CC2</td>
  </tr>
  <tr>
    <td>AA3</td>
    <td>BB3</td>
    <td>CC3</td>
  </tr>
</table>

いぇーーーーーーーーい！！！！！！！！

以上