In einer HTML-Tabelle ist die cellpadding y cellspacing kann auf diese Weise eingestellt werden:
<table cellspacing="1" cellpadding="1">Wie kann dasselbe mit CSS erreicht werden?
Antworten
Zu viele Anzeigen?
Suraj Rawat
Punkte
3479
Rafiqul Islam
Punkte
823
Mit der CSS-Eigenschaft padding können Sie ganz einfach eine Auffüllung innerhalb der Tabellenzellen festlegen. Dies ist eine gültige Methode, um denselben Effekt zu erzielen wie das cellpadding-Attribut der Tabelle.
table,
th,
td {
border: 1px solid #666;
}
table th,
table td {
padding: 10px;
/* Apply cell padding */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set Cellpadding in CSS</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>clarkkent@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>johnrambo@mail.com</td>
</tr>
</tbody>
</table>
</body>
</html>In ähnlicher Weise können Sie die CSS-Eigenschaft border-spacing verwenden, um den Abstand zwischen benachbarten Tabellenzellenrändern wie das Attribut cellspacing anzuwenden. Damit border-spacing funktioniert, muss der Wert der Eigenschaft border-collapse jedoch getrennt sein, was standardmäßig der Fall ist.
table {
border-collapse: separate;
border-spacing: 10px;
/* Apply cell spacing */
}
table,
th,
td {
border: 1px solid #666;
}
table th,
table td {
padding: 5px;
/* Apply cell padding */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set Cellspacing in CSS</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>clarkkent@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>johnrambo@mail.com</td>
</tr>
</tbody>
</table>
</body>
</html>
Falguni Panchal
Punkte
8697
Håkan Nilsson
Punkte
135
MattAllegro
Punkte
5277
Angenommen, wir wollen unserer Tabelle ein 10px "cellpadding" und ein 15px "cellspacing" zuweisen, und zwar auf eine HTML5-konforme Weise. Ich werde hier zwei Methoden zeigen, die sehr ähnliche Ergebnisse liefern.
Zwei verschiedene Sätze von CSS-Eigenschaften gelten für dasselbe HTML-Markup für die Tabelle, aber mit entgegengesetzten Konzepten:
-
der erste verwendet den Standardwert für
border-collapse(separate) und verwendetborder-spacingum die Zellabstände zu bestimmen, -
der zweite schaltet
border-collapseacollapseund verwendet dieborderEigenschaft als Zellabstand.
In beiden Fällen wird das Cellpadding durch Zuweisung von padding:10px zum td s und, in beiden Fällen, die background-color zuzuordnen ist, dient nur der besseren Veranschaulichung.
Erste Methode:
table{border-spacing:15px}
td{background-color:#00eb55;padding:10px;border:0}
<table>
<tr>
<td>Header 1</td><td>Header 2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>Zweite Methode:
table{border-collapse:collapse}
td{background-color:#00eb55;padding:10px;border:15px solid #fff}
<table>
<tr>
<td>Header 1</td><td>Header 2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>
