Ich weiß, dass dies eine dumme Frage ist, aber ich habe scheinbar völlig vergessen, wie sie es tun soll.
Ich habe ein HTML table
und ich möchte alle Ränder um alle Zellen entfernen, so dass nur ein Rahmen um die gesamte Tabelle liegt.
Mein Code sieht so aus:
<table border='1' width='500'>
<tr><th><h1>Your Wheelbarrow</h1></th><tr>
<th>Product</th>
<th>Description</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
<th>Delete</th>
</tr>
Reduzieren Sie einfach die Tabellenränder und entfernen Sie die Ränder von Tabellenzellen (td
-Elementen).
table {
border: 1px solid #CCC;
border-collapse: collapse;
}
td {
border: none;
}
Wenn Sie border-collapse
nicht explizit festlegen, wird das Entfernen von Tabellenzellengrenzen nicht über das Browserübergreifende festgelegt.
Das HTML-Attribut für diesen Zweck ist rules=none
(zum Einfügen in das Tag table
).
Verwenden Sie einfach Ihre Tabelle in einem div mit einer Klasse (beispielsweise .table1
) und setzen Sie keinen Rahmen für diese Tabelle in CSS. Verwenden Sie dann CSS-Code für diese Klasse.
.table1 {border=1px solid black;}
<style type="text/css">
table {
border:1px solid black;
}
</style>
Wahrscheinlich brauchten Sie nur diese CSS-Regel:
table {
border-spacing: 0px;
}
Ändern Sie Ihre Tabellendeklaration in:
<table style="border: 1px dashed; width: 500px;">
Hier ist das Beispiel in Aktion: http://jsfiddle.net/kc48k/
Möglicherweise möchten Sie Folgendes versuchen: http://jsfiddle.net/QPKVX/
Nicht wirklich sicher, wie das endgültige Layout aussehen soll - aber das Colspan-Problem wird dadurch ebenfalls behoben.