Heim >Web-Frontend >CSS-Tutorial >Wie stelle ich den Abstand zwischen Tabellenrändern in CSS ein? Verwendung des Border-Spacing-Attributs
Wie stelle ich den Abstand zwischen Tabellenrändern in CSS ein? Verwendung des Border-Spacing-Attributs
- 青灯夜游Original
- 2019-02-18 10:46:269130Durchsuche
In CSS wird die Eigenschaft „border-spacing“ verwendet, um den Abstand zwischen den Rändern benachbarter Zellen festzulegen, wenn sich der Rand der Tabelle im „getrennten“ Zustand befindet. Der folgende Artikel zeigt Ihnen, wie Sie das Attribut „border-spacing“ verwenden. Ich hoffe, dass es für Sie hilfreich ist.
CSS-Grenzabstandseigenschaft
Grenzabstandseigenschaft „trennt“ den Tabellenrand, Legen Sie den horizontalen und vertikalen Abstand der Zeilen- und Zellenränder fest. [Video-Tutorial-Empfehlung: CSS-Tutorial]
Es kann 1~2 Längenwerte haben:
● Wenn alle zwei Längenwerte sind vorausgesetzt, dass der erste auf den horizontalen Abstand und der zweite auf den vertikalen Abstand wirkt.
● Wenn nur ein Längenwert angegeben wird, gilt dieser Wert für den horizontalen und vertikalen Abstand.
Hinweis: Das Attribut „border-spacing“ entspricht dem HTML-Tag-Attribut „cellspacing“.
Hinweis: Diese Eigenschaft funktioniert nur, wenn die Tabellenränder unabhängig sind (d. h. wenn die Eigenschaft „border-collapse“ auf „separat“ eingestellt ist).
Verwendungsbeispiel der CSS-Eigenschaft „border-spacing“
Das Folgende ist ein einfaches Codebeispiel, um zu sehen, wie die Eigenschaft „border-spacing“ die Tabelle festlegt Randraumabstand:
Beispiel 1: Beim Festlegen von border-collapse: Collapse;:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
table,
td,
th {
border: 1px solid black;
}
td,th{
padding: 5px 20px;
}
#table1 {
border-collapse: collapse;
border-spacing: 15px;
}
</style>
</head>
<body>
<h2>border-spacing: 15px:</h2>
<p>使用“border-collapse:collapse”时，border-spacing属性无效：</p>
<table id="table1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>Peter</td>
<td>20</td>
</tr>
<tr>
<td>Lois</td>
<td>20</td>
</tr>
</table>
</body>
</html>Rendering:
Beispiel 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
table,
td,
th {
border: 1px solid black;
}
td,th{
padding: 5px 20px;
}
#table2 {
border-collapse: separate;
border-spacing: 15px;
}
#table3 {
border-collapse: separate;
border-spacing: 15px 30px;
}
</style>
</head>
<body>
<h2>border-spacing: 15px:</h2>
<p>使用“border collapse:separate”时，border spacing属性可用于设置单元格之间的间距：</p>
<table id="table2">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>Peter</td>
<td>20</td>
</tr>
<tr>
<td>Lois</td>
<td>20</td>
</tr>
</table>
<h2>border-spacing: 15px 30px:</h2>
<p>使用两个length值（第一个值设置水平间距，第二个值设置垂直间距）：</p>
<table id="table3">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>Peter</td>
<td>20</td>
</tr>
<tr>
<td>Lois</td>
<td>20</td>
</tr>
</table>
</body>
</html>Rendering:
Codebeschreibung:
Wenn der Rand unabhängig ist (wenn das Attribut „border-collapse“ auf „trennen“ eingestellt ist), wird der Randabstand wirksam, wenn benachbarte Kanten zusammengeführt werden (wenn das Attribut „border-collapse“ auf „collapse“ eingestellt ist). - Abstandsattribut ist ungültig.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere spannende Inhalte finden Sie in den entsprechenden Tutorial-Kolumnen auf der chinesischen PHP-Website! ! !
Das obige ist der detaillierte Inhalt vonWie stelle ich den Abstand zwischen Tabellenrändern in CSS ein? Verwendung des Border-Spacing-Attributs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!