CSSを使用して、テーブルボーダー + Bordercolordark + Bordercolorlightの境界光と暗い効果を実現する方法をまとめました。その後、ネチズンは私に同様のCSSスタイルを書いた理由を尋ねましたが、彼は通常オペラの下でテーブルの境界効果しか見ることができず、IEの下には何もありませんでした。
私はOpera9を降りて、それが本当にそうであることを見ました。理由は複雑ではありません。IE(FirefoxはIEと一致しているように見える)では、TDの内容が空である場合、高さと幅を設定しても、このセルのボーダースタイルは表示されません。オペラは、コンテンツがあるかどうかに関係なく、このスタイルを使用してレンダリングします。この質問は、私が卒業したときに遭遇しました。部門長はその時に私に尋ねに来ました、そして、後で私は彼に言いました:すべての空のTDにそれを追加するだけです。将来この問題に遭遇するたびに、このシンプルで粗野で効果的な方法を使用して解決します。
しかし、今日、私はそれを数回勉強するために最善を尽くしましたが、jiarryから、CSS構文によりこれらのデフォルトの動作を変更できることを知っていました。および空細胞:show;消えるボーダーを現れます。
class = test1:border-cllapse:clolapseを追加します。
.test1 {
国境:1pxソリッド#999999;
国境崩壊:崩壊;
幅:60%
}
.test1 td {
ボーダーボトム:1pxソリッド#999999;
高さ:28px;
パディング左:6px;
}
Class1ここにコンテンツがあります
ここにコンテンツがあります
class = test2:border-collapse:collapse;および空細胞:show;
.test2 {
ボーダー:1pxソリッドブラック。
国境崩壊:崩壊;
幅:60%
}
.test2 td {
境界線:1pxソリッドブラック。
高さ:28px;
パディング左:6px;
空セル:show;
}
Class2にはここにコンテンツがあります
ここにコンテンツがあります
class = test3:ボーダーコラプスなし:崩壊。および空細胞:show;
.test3 {
国境:1pxソリッド#999999;
幅:60%
}
.test3 td {
ボーダーボトム:1pxソリッド#999999;
高さ:28px;
パディング左:6px;
}
Class3にはここにコンテンツがあります
ここにコンテンツがあります