Heim > Web-Frontend > CSS-Tutorial > Die Eigenschaft „border-collapse' für überlappende Zellränder in CSS-Tabellen

Die Eigenschaft „border-collapse' für überlappende Zellränder in CSS-Tabellen

黄舟
Freigeben: 2017-06-30 09:46:14
Original
4242 Leute haben es durchsucht

Syntax: border-collapse: separate |.collapse

Wert:
separate: Standardwert. Randunabhängig (Standard-HTML)
Reduzieren: Benachbarte Kanten werden zusammengeführt

Beschreibung:
Setzt oder ruft die Zeilen- und Zellenkanten der Tabelle ab. Ob um sie gemäß dem standardmäßigen HTML-Stil zusammenzuführen oder zu trennen.
Diese Eigenschaft ist für das aktuelleStyle-Objekt schreibgeschützt. Es ist für andere Objekte lesbar und beschreibbar.
Die entsprechende Skriptfunktion ist borderCollapse .

Beispiel:

table { border-collapse: separate; }
Nach dem Login kopieren

Gilt für:
IE5.0+ currentStyle runtimeStyle style TABLE


Beispiel 1: Nutzloser Stil

Das Folgende ist ein Zitat-Fragment:

<table width="300" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000">
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
</table>
Nach dem Login kopieren



Beispiel 2: Effektstil

Das Folgende ist ein Zitatfragment:

<table width="300" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000" style="border-collapse:collapse;">
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
</table>
Nach dem Login kopieren


table width=1 hat die Breite bereits auf 1 gesetzt
us Das Problem besteht darin, dass jede td-Seitenlinie 1 Pixel groß ist und die Tabellenseitenlinie ebenfalls 1 Pixel groß ist. Wenn dann zwei tds benachbart sind, beträgt die „Breitensumme“ der Seitenlinien beim Einziehen 1 + 1 = 2, da jede td-Seitenlinie 1 ist. Das Gleiche gilt, wenn td und Tabelle benachbart sind.

reduzieren: Benachbarte Kanten werden zusammengeführt

Benachbarte Kanten werden zusammengeführt! Was ich zuvor gesagt habe, ist 1+1=2 aufgrund des Problems benachbarter Kanten zwischen td und td sowie zwischen td und Tabelle. Benachbarte Kanten werden standardmäßig nicht zusammengeführt, also 1+1=2. Jetzt verwenden wir border-collapse:collapse, um sie zusammenzuführen, sodass die Breite immer noch 1 Pixel beträgt. Das heißt, es erscheint ein dünner Rand.

Der Zellenabstand ist auf „0“ gesetzt und das angezeigte Ergebnis ist, dass der Abstand zwischen den einzelnen Zellen der ersten Tabelle 0 beträgt. Wenn der Tabellenrand auf „0“ gesetzt ist, beträgt der Abstand zwischen den Zellen 0
Das cellpadding-Attribut wird verwendet, um die Größe des Leerabstands zwischen dem Zellinhalt und dem Zellrand anzugeben
. Der Parameterwert dieses Attributs ist ebenfalls eine Zahl, die die Anzahl der Pixel darstellt, die von der Höhe des Leerraums zwischen dem Zellinhalt und dem oberen und unteren Rand eingenommen werden, und die Anzahl der Pixel, die von der Breite des Leerraums zwischen dem Zellinhalt eingenommen werden Zellinhalt und der linke und rechte Rand.

Das obige ist der detaillierte Inhalt vonDie Eigenschaft „border-collapse' für überlappende Zellränder in CSS-Tabellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage