CSSを使用して表の境界線を設定し、互換性を考慮する

テーブルは、Web ページにデータを表示するのに適したタグです。デフォルトでは表に枠線はありませんが、見栄えを良くするために表に枠線を追加することがよくあります。また、IE7/8/9では枠線の色が異なります。CSSを使用して表の枠線の表示を制御する方法を見てみましょう。
まず、簡単なテーブルを作成します。コードは次のとおりです。
[html]

;最初の行 /テーブル>
イニシャルスタイルは非常にシンプルです:
[css]
.my-table {
border: 1px Solid #ccc;
}
この時点では、テーブルは各ブラウザでほぼ同じ動作をします。私は chrome でのスクリーンショットを選択しました



現時点で、各行に枠線を追加する必要がある場合、どうすればよいでしょうか?賢い方なら、tr タグを思い浮かべたはずです。試しに CSS を次のように書き換えてみましょう。 my-table tr {
Border: 1px 青一色
}
次に、ページを更新しますが、残念ながら何も起こりません。 tr の上に境界線を書いても効果がないことに注意してください。そこで、td タグをもう一度試してみましょう。CSS を次のように書き換えてください。 : 1px 青一色
}
各ブラウザのパフォーマンスは基本的に同じですが、問題は td の境界線の間にスペースがあることです。美しくするには、セル間のスペースを削除し、border-collapase:collapase を使用して、CSS を次のように書き換える必要があります。 ; }

.my-table td { border: 1px sold blue;

}

ブラウザによってパフォーマンスが異なるので、テーブルがどのように見えるかを見てみましょう。下の図から、Chrome と FF では、td の境界線がテーブルの外側の境界線を置き換えることがわかりますが、IE では、テーブルの外側のフレームは変更されていません。次回は、より明るいものを使用することがより明白になります。それをマークする色。





では、どうすれば合意を得ることができるでしょうか?テーブルの外側の境界線の幅を増やしても問題ないことがわかりました。厳密に言えば、外側の境界線の幅と td の幅を比較し、どちらか広い方が表示されます。国境。
たとえば、tableとtdの境界線の幅をそれぞれ2pxと1pxに設定し、比較のために境界線の幅を5pxと4pxに設定します(より目を引くように色を変更していることに注意してください)





実際、実験を通じて、現時点ではテーブルのパフォーマンスがすべてのブラウザーで一貫していることがわかりました。 CSS を記述するときに上記のコードを使用すると、IE6 を含むほとんどのブラウザーとの互換性を確保できます。