ホームページ  >  記事  >  ウェブフロントエンド  >  border-collapse:collapse を設定した後、テーブルの境界線はどのようにマージされますか?

border-collapse:collapse を設定した後、テーブルの境界線はどのようにマージされますか?

黄舟
黄舟オリジナル
2017-06-30 09:36:082946ブラウズ

角を丸める必要があるボーダーに遭遇しましたが、border-collapse:collapse、border-radius:5pxを設定した後、機能しないことがわかりました。さまざまに確認したところ、これはCSS自体に存在することがわかりました。併用すること。そのため、テーブルの角を丸くするために他の方法が使用されました。
しかし今、テーブルの境界線とtdとthの境界線がどのようにして1つの境界線にマージされるのか知りたいのですが?
テーブルの左上隅と最初の th の間の交差点と同様に、2 つの境界線が結合された後、テーブルの境界線または th の境界線が保持されますか?保持されているのが th の境界である場合、最初の th の左上隅に border-radius を設定しても効果がないのはなぜですか?

下剤 -v-、先週の金曜日にグループで共有したときに、私は border-collapse の 優先順位 について言及しましたが、表の w3c セクションには、border-collapse:collapse の競合処理の手順が記載されています。 。

このドキュメントには 2 つの詳細な例が含まれており、非常に直感的です。

ここで要約します: (premise border-collapse: Collapse)
1. border-style = [hidden|none]
hidden は、2 つの境界線が 集約されている場合に最も優先されます。が非表示に設定されている場合、最終的な結果は境界線が表示されないことになり、いずれかが none に設定されている限り、他の境界線が結果として直接使用されます。

通常、border-style:hiddenとborder-style:noneはボーダーを表示しませんが、border-collapse:collapseを使用する場合には違いがあります。


2.

border-width が一貫していない場合は、より大きい border-width を持つものが使用されます3. border-style≠[hidden|none] が一貫している場合は、この優先順位を使用します。 double'、'solid'、'dashed'、'dotted'、'ridge'、'outset'、'groove'、'inset'。
4. 境界線の色が異なるだけの場合: dom の階層構造に従います。子要素の境界線スタイルは、親要素の境界線スタイルよりも優れています。 [セル > 行 > 行グループ > テーブル]; 階層構造が
table の場合、左側と上が優先されます。

しかし、特に興味深いのは、仕様でコーナーの折りたたみロジックが指定されていないため、Chrome と Firefox ではパフォーマンスが異なることです。 。

ChromeとFirefoxで別々に開くことができます:BQEMea
下の写真は兄弟TDですが、色が一貫していません、左がChrome、右がFirefoxです

border-collapse:collapse を設定した後、テーブルの境界線はどのようにマージされますか?

以上がborder-collapse:collapse を設定した後、テーブルの境界線はどのようにマージされますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。