table レイアウトで 指定した位置に css が効きません

Question

table レイアウトで指定した位置に、

boderを付けようとしています。

ソースは下記です。

<table class="menu-list-facial">
  <tbody>
<tr>
  <td class="menu" rowspan="4">
    <h3 class="parts-title">小顔フェイシャル</h3>

  </td>
</tr>
<tr>
  <td class="time">60分</td><td class="price">&yen;3,000</td>
</tr>
<tr>
<td class="time">90分</td><td class="price">&yen;5,000</td>
</tr>
<tr>
<td class="time">120分</td><td class="price">&yen;7,000</td>
</tr>
</tbody>
  <tbody>
  <tr>
    <td class="menu" rowspan="3">
      <h3 class="parts-title">小顔矯正</h3>

    </td>
  </tr>
  <tr>
    <td class="time">60分</td><td class="price">&yen;9,000</td>
  </tr>
  <tr>
  <td class="time">90分</td><td class="price">&yen;12,000</td>
  </tr>
</tbody>
<tbody>
     <tr>
      <td class="menu" rowspan="3">
        <h3 class="parts-title">プラズマシャワー</h3>

      </td>
    </tr>
    <tr>
      <td class="time">30分</td><td class="price">&yen;6,000</td>
    </tr>
    <tr>
    <td class="time">60分</td><td class="price">&yen;10,000</td>
    </tr>
</tbody>
    </table>

/*-------------------------------------------
menu
-------------------------------------------*/

tbody{
  border-bottom:1px dotted #000;
}

  #menu .parts .reserve-box{
    padding:40px 0;
  }




/*facial*/

 .menu-list-facial .menu{
  width:80%;
  padding-bottom:13px;
  margin-top:20px;
  vertical-align: top;
}
 .menu-list-facial .time{
  width:10%;
  padding-bottom:13px;
  margin-top:20px;
  text-align:right;

}
 .menu-list-facial .price{
  width:10%;
  padding-bottom:13px;
  margin-top:20px;
  text-align:right;

}

各メニューごとの下に下線を引きたいので、
それぞれのメニューを　tbody で囲って

tbody{
border-bottom:1px dotted #000;
}

このように　cssを指定したのですが、反映されません。

検証ツールでみても反映はされていますが、ブラウザ上には反映されていません。

何が問題があるのでしょうか？

試したこと、

tbody に　class をふって　tbody class="border"
と指定しても変わりませんでした。

nth-child で指定しようとしましたが、思った位置にboreder がつけれませんでした。
tr:last-child{
border-bottom:1px dotted #fff;
}
とつけても反映されなかったです。

Answer 1

これかなあ、という気がします。border-collapse: collapseを指定してみてはどうですか？

In this model, each cell has an individual border. The border-spacing property specifies the distance between the borders of adjoining cells. In this space, the row, column, row group , and column group backgrounds are invisible, allowing the table background to show through. Rows, columns, row groups, and column groups cannot have borders (i.e., user agents must ignore the border properties for those elements).
17.6.1. The separated borders model | CSS 2

Comments

[niconic73027793]

ありがとうございます！
できました。

Answer 2

.menu-list-facial {
  border-collapse:collapse;
}

Comments

[niconic73027793]

ありがとうございます！
できました。