wake-up-neo.com

Rahmen aus Tabellenzellen entfernen

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>
22
user1278496

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.

46
brezanac

Das HTML-Attribut für diesen Zweck ist rules=none (zum Einfügen in das Tag table).

12

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;}
3
perfectionist1
<style type="text/css">
table {
  border:1px solid black;
}
</style>
2
js1568

Wahrscheinlich brauchten Sie nur diese CSS-Regel:

table {
   border-spacing: 0px;
}

http://jsfiddle.net/Bz3Jt/3/

2
gumkins

Ändern Sie Ihre Tabellendeklaration in:

<table style="border: 1px dashed; width: 500px;">

Hier ist das Beispiel in Aktion: http://jsfiddle.net/kc48k/

2
hjpotter92

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. 

2
mikevoermans

Wenn keine der Lösungen auf dieser Seite funktioniert und Sie das folgende Problem haben:

 enter image description here

Sie können dieses CSS-Snippet einfach verwenden:

td {
   padding: 0;
}
0
The Codesee