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

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; }

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>

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>

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!