html CSS3 table 最後だけボーダーが違う指定

ちょっとハマったのでメモ

良い例

東京	千代田区
千葉	若葉区
神奈川	指定なし
福岡	天神

html

<table class="table01">
  <tr>
    <th>東京</th>
    <td>千代田区</td>
  </tr>
  <tr>
    <th>千葉</th>
    <td>若葉区</td>
  </tr>
  <tr>
    <th>神奈川</th>
    <td>指定なし</td>
  </tr>
  <tr>
    <th>福岡</th>
    <td>天神</td>
  </tr>
</table>

CSS

.table01 th {
  width: 123px;
  color: #fff;
  border: 1px solid;
  border-color: #000 #000 #fff #000;
  background: #0095d9; }
.table01 td {
  width: 200px;
  border: 1px solid #000; }
.table01 tr:last-child th {
  border-bottom: 1px solid #000; }

scss

.table01 {
  & th {
    width: 123px;
    color: #fff;
    border: 1px solid;
    border-color: #000 #000 #fff #000;
    background: #0095d9;
  }
  & td {
    width: 200px;
    border: 1px solid #000;
  }
  & tr:last-child th {
    border-bottom: 1px solid #000;
  }
}

失敗例

thの一番下のボーダー色が白になっています。

東京	千代田区
千葉	若葉区
神奈川	指定なし
福岡	天神

htmlは同じ

失敗CSS

.table01 th {
  width: 123px;
  color: #fff;
  border: 1px solid;
  border-color: #000 #000 #fff #000;
  background: #0095d9; }
.table01 td {
  width: 200px;
  border: 1px solid #000; }
.table01 tr:last-child th {
  border-bottom: 1px solid #000; }

失敗scss

.table01 {
  & th {
    width: 123px;
    color: #fff;
    border: 1px solid;
    border-color: #000 #000 #fff #000;
    background: #0095d9;
  }
  & td {
    width: 200px;
    border: 1px solid #000;
  }
}

ポイント

tr:last-child th {
  border-bottom: 1px solid #000;
}