Das Attribut „border-collapse“ wird für Tabellenelemente verwendet und kann verwendet werden, um die beiden Ränder der Tabelle zu einem einzigen Rahmen zusammenzuführen. Alle gängigen Browser unterstützen das border-collapse-Attribut.
Wie verwende ich die CSS-Border-Collapse-Eigenschaft?
Das Attribut „border-collapse“ legt fest, ob die Ränder der Tabelle zu einem einzigen Rahmen reduziert oder wie in Standard-HTML separat angezeigt werden.
Syntax:
border-collapse: separate|collapse|inherit;
Attributwert:
● separat: Standardwert. Die Grenzen werden getrennt. Die Eigenschaften border-spacing und empty-cells werden nicht ignoriert.
●Zusammenklappen: Wenn möglich, werden die Ränder zu einem einzigen Rand zusammengeführt. Die Eigenschaften border-spacing und empty-cells werden ignoriert.
● Inherit: Gibt an, dass der Wert des border-collapse-Attributs vom übergeordneten Element geerbt werden soll.
Hinweis: Alle gängigen Browser unterstützen das Attribut „border-collapse“. Der Attributwert „inherit“ wird in keiner Version von Internet Explorer (einschließlich IE8) unterstützt. Wenn !DOCTYPE nicht angegeben ist, kann die Randreduzierung zu unerwarteten Ergebnissen führen.
Beispiel für ein CSS-Rand-Collapse-Attribut
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
table{
border-collapse:collapse;
}
table, td, th{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>Bill</td>
<td>20</td>
</tr>
<tr>
<td>Steven</td>
<td>25</td>
</tr>
</table>
</body>
</html>Rendering:
Das obige ist der detaillierte Inhalt vonSo verwenden Sie die CSS-Eigenschaft border-collapse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
