Cellpadding und Cellspacing in CSS festlegen?

Question

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?

Answer 1

Für diejenigen, die einen Zellabstand ungleich Null haben wollen, hat das folgende CSS bei mir funktioniert, aber ich kann es nur in Firefox testen.

Siehe die Quirksmode Link an anderer Stelle veröffentlicht für Details zur Kompatibilität. Es scheint, dass es mit älteren Internet Explorer-Versionen nicht funktioniert.

table {
    border-collapse: separate;
    border-spacing: 2px;
}

Answer 2

Die einfache Lösung für dieses Problem lautet:

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

Answer 3

Und wenn Sie wollen cellspacing="0" vergessen Sie nicht, hinzuzufügen border-collapse: collapse en su table das Stylesheet.

Answer 4

Wenn Sie den Inhalt der Zelle mit einem div umhüllen, können Sie alles tun, was Sie wollen, aber Sie müssen jede Zelle in einer Spalte umhüllen, um einen einheitlichen Effekt zu erzielen. Zum Beispiel, um einfach breitere linke und rechte Ränder zu erhalten:

Der CSS wird also sein,

div.cellwidener {
  margin: 0px 15px 0px 15px;
}
td.tight {
  padding: 0px;
}

<table border="0">
  <tr>
    <td class="tight">
      <div class="cellwidener">My content</div>
    </td>
  </tr>
</table>

Ja, es ist mühsam. Ja, es funktioniert mit dem Internet Explorer. Tatsächlich habe ich es nur mit dem Internet Explorer getestet, weil das alles ist, was wir auf der Arbeit verwenden dürfen.

Answer 5

Dieser Stil ist für Vollständige Rückstellung für Tabellen - cellpadding , Zellabstand y Grenzen .

Ich hatte diesen Stil in meiner reset.css-Datei:

table{
    border:0;          /* Replace border */
    border-spacing: 0px; /* Replace cellspacing */
    border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
    padding: 0px; /* Replace cellpadding */
}