Bei der Verwendung von TABLE-Tabellen werden Anfänger in der HTML-Erstellung darauf stoßen, wie man die Kantendicke ändert, weil die Standard-TABLE-Kanteneinstellung sehr dick ist, selbst wenn sie 1px ist. Daher gibt es auch andere Methoden, um dünne Liniengrenzen zu erstellen, und hier ist eine Methode, mit CSS dünne Linien zu implementieren, die sehr effektiv und mit allen Browsern kompatibel ist.
Wenn man einfach den Rand für eine dünne Tabelle setzt, ist es schwierig sicherzustellen, dass der Browser kompatibel ist. Eine gängige Praxis ist die Verwendung von CSS2s "border-collapse:collapse"; Attribut-Zusammenführungs-Tabellengrenzen; Und setze die linken und oberen Ränder für Tabellenelemente und die rechten und unteren Ränder für th- und td-Elemente.
HTML:
<table> <tr> <th>Tabellenkopf (Zeile1, Kol1)</th> <th>Tabellenkopf (Zeile1, Kol2)</th> <th>Tabellenkopf (Zeile1, Kol3)</th> </tr> <tr> <td>Tabellendaten (Zeile1, Kol1)</td> <td>Tabellendaten (Zeile1, Kol2)</td> <td>Tabellendaten (Zeil1, Kol3)</td> </tr> <tr> <td>Tabellendaten (Zeile2, Kol1)</td> <td>Tabellendaten (Zeile2, Kol2)</td> <td>Tabellendaten (Zeile2, Kol3)</td> </tr> CSS</table>:
table{border-collapse:collapse; Grenzabstand: 0; Rand-links:1px fest #888; Border-Top: 1px Solid #888; Hintergrund: #efefef; } th,td{border-right:1px solid #888; Rand-unten: 1 Pixel fest #888; Polsterung: 5px 15px; } th{font-weight:bold; Hintergrund: #ccc; } |