Heim >Web-Frontend >CSS-Tutorial >Wie werden die Ränder der Tabelle nach dem Festlegen von border-collapse:collapse zusammengeführt?

Wie werden die Ränder der Tabelle nach dem Festlegen von border-collapse:collapse zusammengeführt?

黄舟
黄舟Original
2017-06-30 09:36:082966Durchsuche

Ich bin auf einen Rahmen gestoßen, der abgerundete Ecken benötigte, und dann stellte ich fest, dass das Festlegen von border-collapse:collapse, border-radius:5px nicht funktionierte, und stellte fest, dass es sich dabei um CSS selbst handelte existiert, und die beiden können nicht miteinander vermischt werden. Daher wurden andere Methoden verwendet, um abgerundete Tischecken zu erzielen.
Aber jetzt möchte ich wissen, wie der Rand der Tabelle und die Ränder von td und th zu einem Rand zusammengeführt werden?
Ähnlich wie beim Schnittpunkt zwischen der oberen linken Ecke der Tabelle und der ersten Ecke bleibt nach dem Zusammenführen der beiden Ränder der Rand der Tabelle oder der Rand der Tabelle erhalten? Wenn der Rand von th beibehalten wird, warum hat das Festlegen des Randradius in der oberen linken Ecke des ersten th dann immer noch keine Auswirkung?

Abführmittel-v-, es ist einfach so passiert, dass ich letzten Freitag, als ich es in der Gruppe teilte, die Priorität des Randzusammenbruchs erwähnte. Der w3c-Abschnitt über Tabellen enthält Anweisungen für den Rand -collapse: Konfliktbehandlung reduzieren.

Das Dokument enthält zwei detaillierte Beispiele, die sehr intuitiv sind.

Hier fasse ich zusammen: (premise border-collapse: Collapse)
1. border-style = [hidden|none]
hidden hat die höchste Priorität, wenn zwei Ränder erzeugen Aggregation. Solange einer von beiden auf „Ausgeblendet“ gesetzt ist, wird im Endergebnis kein Rahmen angezeigt. Solange einer von beiden auf „Keine“ gesetzt ist, wird keiner angezeigt direkt für das Ergebnis verwendet werden.

Normalerweise zeigen border-style:hiden und border-style:none den Rand nicht an. Es gibt einen Unterschied, wenn border-collapse:collapse verwendet wird.

2. Wenn border-width inkonsistent ist, hat die größere border-width Vorrang
3 Wenn die Breite gleich ist, verwenden Sie diese Priorität: „double“, „solid“, „dashed“, „dotted“, „ridge“, „outset“, „groove“, „inset“.
4 Die Farbe ist einfach anders: Gemäß der hierarchischen DOM-Struktur ist der Rahmenstil des untergeordneten Elements besser als der Rahmenstil des übergeordneten Elements. [Zelle > Zeilengruppe > Tabelle]; Wenn es sich bei der hierarchischen Struktur um eine Geschwisterbeziehung handelt, haben die linke und die obere Seite Vorrang. Besonders interessant ist jedoch, dass die Spezifikation die Kollapslogik der Ecke nicht spezifiziert, sodass die Leistung unter Chrome und Firefox unterschiedlich ist. .

Kann unter Chrome bzw. Firefox geöffnet werden: BQEMea

Das Bild unten ist ein Bruder-TD, nur die Farbe ist inkonsistent, dann ist links Chrome und rechts Firefox

Das obige ist der detaillierte Inhalt vonWie werden die Ränder der Tabelle nach dem Festlegen von border-collapse:collapse zusammengeführt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn