[解決済み] tr要素の周りのボーダーが表示されない？

質問

Chrome/Firefoxでは、以下のような場合、ボーダーがレンダリングされないようです。 tr の場合、ボーダーが表示されますが、セレクタが table tr td .

trにボーダーを設定するには？

私の試みは、うまくいきません。

table tr {
  border: 1px solid black;
}

<table>
  <tbody>
    <tr>
      <td>
        Text
      </td>
    </tr>
  </tbody>
</table>

http://jsfiddle.net/edi9999/VzPN2/

これは似たような質問ですね。 テーブルtrにボーダーを設定する、IE 6 & 7以外では動作する , しかし、IE以外ではどこでも動作するようです。

解決するには？

これをスタイルシートに追加します。

table {
  border-collapse: collapse;
}

JSFiddle .

なぜこのような挙動になるのかは、実は 仕様書 :

テーブルのセルにボーダーを設定するには、2つの異なるモデルがあります。 CSSを使用します。1つは、いわゆる分離したボーダーが もう1つは、個々のセルに対応するボーダーです。 表の端から端まで連続している。

...そして、後に collapse を設定します。

コラプシングボーダーモデルでは、ボーダーを指定することが可能です。 セル、行、行グループ、列、列のすべてまたは一部を囲みます。 グループとなります。