trタグの周囲にどのように境界線を付けるのですか？

Question

私は非常に簡単なHTMLページがあります。私は、これはtrの周囲に境界線を置くことを期待するだろうが、それは周囲に境界線を入れていません

tr { 
    border:1px solid blue; 
} 

：いくつかの簡単なCSSで

<table> 
    <tr><th>header1</th><th>header2</th></tr> 
    <tr><td>item1</td><td>item2</td></tr> 
    <tr><td>item3</td><td>item4</td></tr> 
</table> 

をそれはまったくありません。 trの周りの境界線を取得するにはどうすればよいですか？

Answer 1

table { border-collapse: collapse; }を追加します。

the CSS2 specificationから：

[border-collapse: separateモデル]で、各セルは、個々の境界を有しています。 [...]行、列、行グループ、列グループは枠線を持つことができません（つまり、ユーザーエージェントはそれらの要素の境界線のプロパティを無視する必要があります）。

Answer 2

borderが行のすぐ上に表示されるようにしたい場合は、コードが機能します。

あなたはどこにでもborderを持っているために探している場合は、あなたがこれを行う必要があります：

tr, td, th{ 
    border:1px solid blue; 
} 

例：http://jsfiddle.net/jasongennaro/83VjH/

Answer 3

国境がに境界線を追加することで、テーブルの行に追加することができます<td>と<th>要素[これは、基本的にCSSを達成するためのトリックです（ハック！）ボーダーをに追加できないtr >および<tbody>テーブルの要素]。 CSSに次のスタイルを追加すると、行やヘッダー、表のセルの周りに枠線を表示できます。

table { 
    border-collapse: collapse; 
} 
table td, table th { 
    border: solid white; 
} 
td { 
    border-color: red (just an example, can be as per your requirement); 
} 

説明：

1. 国境崩壊のルールは、テーブル全体に追加されます。別の2つの可能なプロパティを別々に（デフォルト）、継承することができます。それぞれの効果、すなわち（ヘッダ細胞）<（データ細胞）TD >と>番目<にborderプロパティを追加https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
2. 二番目のルールを参照するためには必須です。追加しないと、枠線は表示されません。このルールでは、境界線の色は白ですが、白ではなく他の色にすることもできます。基本的には、このルールは表のセルの周りの境界線をアクティブにし、色は白であるため何も表示されません。
3. 最後に、選択した色を追加します。このルールは、<td>または<td>のクラスにボーダーを適用する場合に、より具体的になります。