tr要素の周りのボーダーが表示されませんか?


107

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以外のすべての場所で機能するようです。


2
私はFirefoxを使用していますが、境界線が表示されません
Speedysnail6

回答:


255

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

table {
  border-collapse: collapse;
}

JSFiddle

このように動作する理由は、実際には仕様でかなりよく説明されています

CSSのテーブルセルに境界線を設定するには、2つの異なるモデルがあります。1つは、個々のセルの周囲のいわゆる境界線に最も適しており、もう1つは、テーブルの一方の端から他方の端まで連続している境界に適しています。

...以降、collapse設定用:

折りたたみボーダーモデルでは、セル、行、行グループ、列、列グループのすべてまたは一部を囲むボーダーを指定できます。


2
なぜ境界が隠されたのですか?
edi9999 2013

4
これが、separateデフォルト-表の境界線モデルが機能する方法です。各セルの境界線を指定します。回答をドキュメントからの引用で更新します。
raina77ow 2013

1
@ edi9999-リセットスタイルシートの使用をお勧めします。これをチェックしてくださいhttp://www.cssreset.com/
Black Sheep

2
境界線が非表示になった理由の具体的な説明は、引用されたCSS仕様の次のステートメントであり、分離された境界線モデルに適用されるものとして提示されています。これらの要素のプロパティ)。」
Jukka K.Korpela、2014

助けてくれたフィドラーの例で遊んだおかげで、;)
Zeek2
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.