Fügen Sie mit css Leerzeichen zwischen den Zellen (td) hinzu

87

Ich versuche, eine Tabelle mit Leerzeichen zwischen den Zellen hinzuzufügen, da die Hintergrundfarbe der Zelle weiß und die Hintergrundfarbe der Tabelle blau ist. Sie können leicht erkennen, dass Polsterung und Rand nicht funktionieren (ich wende sie auf die an td). Es wird nur Platz innerhalb der Zelle hinzugefügt.

html css

— Amra
quelle

2

Mögliches Duplikat von Wie werden Zellauffüllung und Zellabstand in CSS eingestellt?

— Benutzer

114

Sie wollen border-spacing:

<table style="border-spacing: 10px;">

Oder irgendwo in einem CSS-Block:

table {
  border-spacing: 10px;
}

Siehe Quirksmode auf border-spacing. Beachten Sie, dass border-spacingdies unter IE7 und darunter nicht funktioniert.

— Dominic Rodger
quelle

2

In IE7 und darunter können Sie das Zellenabstandsattribut im Tabellen-Tag verwenden. Sie können beides bereitstellen, damit es auch im IE funktioniert. Andere Browser priorisieren den Stil.

— Tor Valamo

35

table { 
  border-spacing: 10px; 
}

Dies funktionierte für mich, nachdem ich entfernt hatte

border-collapse: separate;

von meinem Tisch-Tag.

— Kelly
quelle

1

getrennt statt getrennt, aber es hat mir geholfen :-)

— FredRoger

Ja, ich wusste nicht, dass du auch den 'Grenzkollaps' ändern musstest. Dies sollte die richtige Antwort sein.

— Jleggio

29

Meins ist:

border-spacing: 10px;
border-collapse: separate;

— JanBorup
quelle

Ich muss die Boder-Collapse-CSS-Eigenschaft hinzufügen, damit der Rand wirksam wird. danke

— ufk

4

Erwägen Sie die Verwendung von cellspacingund cellpaddingAttributen für tableTag- oder border-spacingCSS-Eigenschaften.

— Kniganapolke
quelle

4

Der Parameter für den Zellenabstand (Abstand zwischen Zellen) des TABLE-Tags ist genau das, was Sie möchten. Der Nachteil ist, dass es sich um einen Wert handelt, der sowohl für x als auch für y verwendet wird. Sie können keinen unterschiedlichen Abstand oder Abstand vertikal / horizontal wählen. Es gibt auch eine CSS-Eigenschaft, die jedoch nicht allgemein unterstützt wird.

— SF.
quelle

2

Angenommen cellspcing/ cellpadding/ border-spacingEigenschaft haben, nicht funktioniert Sie den Code wie folgt verwenden können.

<div class="form-group">
  <table width="100%" cellspacing="2px" style="border-spacing: 10px;">
    <tr>                        
      <td width="47%">
        <input type="submit" class="form-control btn btn-info" id="submit" name="Submit" />
      </td>
      <td width="5%"></td>
      <td width="47%">
        <input type="reset" class="form-control btn btn-info" id="reset" name="Reset" />
      </td>
    </tr>
  </table>
</div>

Ich habe versucht, Erfolg zu haben, während ich die Schaltfläche mithilfe der Tabellenbreite getrennt habe und ein leeres td als 2 oder 1% erstellt habe. Es wird nicht mehr anders zurückgegeben.

— RAM
quelle

0

Wenn Sie separate Werte für Seiten und von oben nach unten wünschen.

<table style="border-spacing: 5px 10px;">

— vergessen John
quelle