空の場合にtdの枠線を表示する方法_HTML/Xhtml_Webページ制作

以前、CSSを使用してテーブルの境界線、bordercolordark、bordercolorlightの境界線の明暗効果を実現する方法をまとめました。その後、ネチズンから、なぜ同様のCSSスタイルを書いたのかと尋ねられましたが、テーブルの境界線効果は通常にしか表示されませんOpera では、IE では何もありません。
Opera 9 をダウンロードしてみたところ、まさにその通りでした。理由は複雑ではありません。IE (Firefox は IE と一致しているようです) では、td の内容が空の場合、高さと幅を設定しても、Opera に関係なくセルの境界線スタイルが表示されないためです。コンテンツの有無にかかわらず、レンダリングには常にスタイルが使用されます。卒業直後にこの問題に遭遇しました。その後、当時の部門の課長が私に尋ねてきました。「空の TD にすべて追加してください。」と言いました。今後この問題に遭遇するたびに、この単純で粗雑で効果的な方法を使用して解決するつもりです。
しかし、今日、私は多くの調査を行って、元の CSS 構文で次のデフォルトの動作を変更できることを学びました。
class="test1": border-collapse:collapse;
.test1{
border:1px Solid #999999;
border-collapse:collapse; >}
.test1 td{
border-bottom:1px Solid #999999;
padding-left:6px;
ここにコンテンツがあります
ここにコンテンツがあります
class="test2": border-collapse:collapse; と empty-cells:show; を追加します。
border:1px Solid black :collapse ;
width:60%
}
.test2 td{
border-bottom:1px ソリッドブラック
padding-left:6px; >empty -cells:show;
}
class2 ここにコンテンツがあります
ここにコンテンツがあります
class="test3": border-collapse:collapse と empty-cells:show; を追加しません。
.test3{
border:1px ソリッド #999999;
width:60%
}
.test3 td{
border-bottom:1px ソリッド #999999; : 28px;
padding-left:6px;
}
ここにコンテンツ
ここにコンテンツ