tdが空の場合に境界線を表示する方法

以前、CSS を使用してテーブルの border + bordercolordark + bordercolorlight 効果を実現する方法をまとめました。その後、あるネットユーザーが、なぜ同様の CSS スタイルを書いたのかと尋ねましたが、テーブルの border 効果は Opera では正常に表示されますが、IE では何も表示されません。
Opera 9 をダウンロードして、確かにその通りであることを確認しました。理由は複雑ではありません。IE (Firefox も IE と同じようです) では、td のコンテンツが空の場合、高さと幅を設定してもセルの境界線スタイルは表示されませんが、Opera ではコンテンツの有無に関係なくスタイルを適用してレンダリングします。私は卒業してすぐにこの問題に遭遇しました。部門の課長が私に尋ねに来たので、私は彼にこう言いました。「空の TD ごとに追加するだけです。」今後この問題に遭遇したときは、この単純で大まかかつ効果的な方法を使って解決するつもりです。
しかし、今日、私はそれを少し勉強するために一生懸命努力し、Jiarry から、元の CSS 構文ではこれらのデフォルトの動作を変更できることを学びました。つまり、border-collapse:collapse; と empty-cells:show; を使用すると、消えた境界線を表示できるのです。
class="test1": border-collapse:collapse; を追加します。
.test1{
境界線:1px 実線 #999999;
境界線の折りたたみ:折りたたみ;
幅:60%
}
.test1 td{
border-bottom:1px 実線 #999999;
高さ:28px;
パディング左:6px;
}
class1 ここにコンテンツがありますここにコンテンツがあります
class="test2": border-collapse:collapse; と empty-cells:show; を追加します。
.test2{
border:1px 黒一色;
境界線の折りたたみ:折りたたみ;
幅:60%
}
.test2 td{
border-bottom:1px 黒一色;
高さ:28px;
パディング左:6px;
空のセル:表示;
}
class2 ここにコンテンツがありますここにコンテンツがあります
class="test3": border-collapse:collapse; および empty-cells:show; なし
.test3{
境界線:1px 実線 #999999;
幅:60%
}
.test3 td{
border-bottom:1px 実線 #999999;
高さ:28px;
パディング左:6px;
}
class3 ここにコンテンツがありますここにコンテンツがあります

<<: MySQLカバーインデックスの使用例

>>: CSS で overflow-y: visible; が機能しない理由の分析と解決