CSS Cell Margin

95

In meinem HTML-Dokument habe ich eine Tabelle mit zwei Spalten und mehreren Zeilen. Wie kann ich mit CSS den Abstand zwischen der ersten und zweiten Spalte vergrößern? Ich habe versucht, "margin-right: 10px;" zu jeder der Zellen auf der linken Seite, aber ohne Wirkung.

html css cell margin css-tables Tom
quelle

Es gibt eine gute CSS-Lösung hier, neu aktualisiert: stackoverflow.com/a/21551008/2827823

Ason

89

Wenden Sie dies auf Ihre erste an <td>:

padding-right:10px;

HTML-Beispiel:

<table>
   <tr>
      <td style="padding-right:10px">data</td>
      <td>more data</td>
   </tr>
</table>

römisch m
quelle

12

Ein weitaus besserer Ansatz wäre die Verwendung des Grenzkollapses: getrennt

Gaurav Ramanan

21

Nur für den Fall, dass jemand den obigen Kommentar kopiert / eingefügt hat, sollte dies der Fall sein border-collapse: separate(es gab einen Tippfehler in der separateobigen Schreibweise )

Tony DiNitto

1

Wenn Sie den Abstand zwischen den Rändern definieren möchten, müssen Sie außerdemborder-spacing: 5px;

Sølve Tornøe

border-spacingFügt auch Platz zwischen Zeilen hinzu. Leider gibt es keine separate Eigenschaft für den vertikalen und horizontalen Abstand.

Lee Blake

border-spacingnimmt zwei Argumente - eines für horizontal und eines für vertikal.

OldTinfoil

152

Ein Wort der Warnung: Obwohl dies padding-rightIhr spezielles (visuelles) Problem lösen könnte, ist es nicht der richtige Weg, den Abstand zwischen Tabellenzellen zu erhöhen. Was padding-rightfür eine Zelle funktioniert, ähnelt dem für die meisten anderen Elemente: Es fügt Platz innerhalb der Zelle hinzu. Wenn die Zellen keinen Rand oder keine Hintergrundfarbe haben oder etwas anderes, das das Spiel verrät, kann dies den Effekt des Einstellens des Abstands zwischen den Zellen nachahmen, aber nicht anders.

Wie bereits erwähnt, werden Randspezifikationen für Tabellenzellen ignoriert:

CSS 2.1-Spezifikation - Tabellen - Visuelles Layout des Tabelleninhalts

Interne Tabellenelemente erzeugen rechteckige Felder mit Inhalt und Rahmen. Zellen haben auch Polsterung. Interne Tabellenelemente haben keine Ränder.

Was ist dann der "richtige" Weg? Wenn Sie das cellspacingAttribut der Tabelle ersetzen möchten, ist border-spacing(mit border-collapsedeaktiviert) ein Ersatz. Wenn jedoch "Ränder" pro Zelle erforderlich sind, bin ich mir nicht sicher, wie dies mit CSS korrekt erreicht werden kann. Der einzige Hack, an den ich denken kann, ist zu verwendenpadding vorstellen wie oben zu verwenden, jegliches Styling der Zellen (Hintergrundfarben, Rahmen usw.) zu vermeiden und stattdessen Container-DIVs in den Zellen zu verwenden, um ein solches Styling zu implementieren.

Ich bin kein CSS-Experte, daher könnte ich mich in den obigen Punkten irren (was sehr gut zu wissen wäre! Auch ich hätte gerne eine CSS-Lösung mit Tabellenzellenrand).

Prost!

Ravi
quelle

Das ist großartig und alles zum Auffüllen, aber was ist mit dem Rand? Ich möchte Platz außerhalb der Zelle hinzufügen, die einen Rand enthält. Margin CSS scheint keinen Einfluss auf die Zellen zu haben.

Levitikon

1

Levitikon, das stimmt - Ränder funktionieren aus den oben genannten Gründen nicht. Der einzige Weg, um das zu bekommen, was Sie wollen, AFAIK, besteht darin, den Inhalt der Zelle in einen DIV zu packen, den Rand und den Rand zu diesem DIV und nicht zur Zelle hinzuzufügen .

Ravi

Ich habe vor langer Zeit eine CSS-Lösung veröffentlicht (heute aktualisiert): stackoverflow.com/a/21551008/2827823

Ason

27

Wenn Sie keine Auffüllung verwenden können (z. B. haben Sie Ränder in td), versuchen Sie dies

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

nika206
quelle

3

Sie können mehr über Grenzkollaps

Gaurav Ramanan

14

Mir ist klar, dass dies ziemlich verspätet ist, aber für den Datensatz können Sie auch CSS-Selektoren verwenden, um dies zu tun (ohne dass Inline-Stile erforderlich sind). Dieses CSS wendet Auffüllungen auf die erste Spalte jeder Zeile an:

table > tr > td:first-child { padding-right:10px }

Und das wäre Ihr HTML, ohne CSS!:

<table><tr><td>data</td><td>more data</td></tr></table>

Dies ermöglicht ein viel eleganteres Markup, insbesondere in Fällen, in denen Sie viele spezifische Formatierungen mit CSS vornehmen müssen.

quelle

14

Der Rand funktioniert leider nicht für einzelne Zellen. Sie können jedoch zusätzliche Spalten zwischen den beiden Zellen einfügen, zwischen denen Sie ein Leerzeichen einfügen möchten. Eine andere Option ist die Verwendung eines Rahmens mit derselben Farbe wie der Hintergrund.

Cian
quelle

Es scheint, als hätte der Rand das gleiche Problem wie das Auffüllen - er fügt Platz zwischen dem Zelleninhalt und der Grenze hinzu, nicht außerhalb der Grenze.

Stewbasic

11

Sie können das einfach tun:

<html>
<table>
    <tr>
        <td>one</td>
        <td width="10px"></td>
        <td>two</td>
    </tr>
</table>
</html>

Es ist kein CSS erforderlich :) Diese 10px ist Ihr Platz.

MrTrebor
quelle

Das ist gut, einfach und effektiv, danke, dass du mich daran erinnert hast +1

Hayden Thring

8

Dies ist kein guter Ansatz zur Trennung von Struktur und Stil. Es geht nicht darum, ob CSS erforderlich ist oder nicht - CSS sollte für so etwas verwendet werden.

Simon Robb

sollte nicht <td style = "width: 10px;"> </ td> sein

Rune Jeppesen

1

Denken Sie daran, die einfachsten Lösungen sind die besten. Methode mit Inline-Stil ist auch gut :)

MrTrebor

Es funktioniert für meinen speziellen Fall. Sehr kreativ. Vielen Dank

Phan Van Linh

7

Versuchen Sie es padding-right. Du darfst nicht marginzwischen Zellen setzen.

<table>
   <tr>
      <td style="padding-right: 10px;">one</td>
      <td>two</td>
   </tr>
</table>

mpen
quelle

4

Mit border-collapse: trennen;hat bei mir nicht funktioniert, weil ich nur einen Rand zwischen den Tabellenzellen brauche, nicht an den Seiten der Tabelle.

Ich habe die nächste Lösung gefunden:

- CSS

.tableDiv{
    display: table;
}

.cellSeperator {
    display: table-cell;
    width: 20px;
}

.cell1 {
    display: table-cell;
    width: 200px;
}

.cell2 {
    display: table-cell;
    width: 50px;
}

- HTML

<div class="tableDiv">
    <div class="cell1"></div>
    <div class="cellSeperator"></div>
    <div class="cell2"></div>
</div>

Robin
quelle

4

Diese Lösung funktioniert für tddiejenigen, die sowohl borderals auch paddingfür das Styling benötigen .
(Getestet auf Chrome 32, IE 11, Firefox 25)

CSS:
table {border-collapse: separate; border-spacing:0; }   /*  separate needed      */
td { display: inline-block; width: 33% }  /*  Firefox need inline-block + width  */
td { position: relative }                 /*  needed to make td move             */
td { left: 10px; }                        /*  push all 10px                      */
td:first-child { left: 0px; }             /*  move back first 10px               */
td:nth-child(3) { left: 20px; }           /*  push 3:rd another extra 10px       */

/*  to support older browsers we need a class on the td's we want to push
    td.col1 { left: 0px; }
    td.col2 { left: 10px; }
    td.col3 { left: 20px; }
*/

HTML:
<table>
    <tr>
        <td class='col1'>Player</td>
        <td class='col2'>Result</td>
        <td class='col3'>Average</td>
    </tr>
</table>

Aktualisiert 2016

Firefox unterstützt es jetzt ohne inline-blockund ohne Setwidth

table {border-collapse: separate; border-spacing:0; }
td { position: relative; padding: 5px; }
td { left: 10px; }
td:first-child { left: 0px; }
td:nth-child(3) { left: 20px; }
td { border: 1px solid gray; }


/* CSS table */
.table {display: table; }
.tr { display: table-row; }
.td { display: table-cell; }

.table { border-collapse: separate; border-spacing:0; }
.td { position: relative; padding: 5px; }
.td { left: 10px; }
.td:first-child { left: 0px; }
.td:nth-child(3) { left: 20px; }
.td { border: 1px solid gray; }

<table>
  <tr>
    <td>Player</td>
    <td>Result</td>
    <td>Average</td>
  </tr>
</table>

<div class="table">
  <div class="tr">
    <div class="td">Player</div>
    <div class="td">Result</div>
    <div class="td">Average</div>
  </div>
</div>

Erweitern Sie das Snippet

Einen Sohn
quelle

Dies funktionierte auch für CSS-Tabellen (Anzeige: Tabelle *), die aus Divs bestehen.

Necreaux

2

Auf diese Weise können Sie einzelne Spalten in einer Zelle nicht herausgreifen. Meiner Meinung nach ist es am besten, ein style='padding-left:10px'in die zweite Spalte einzufügen und die Stile auf ein internes div oder Element anzuwenden. Auf diese Weise können Sie die Illusion eines größeren Raums erreichen.

Jerebear
quelle

2

Wenn Sie die Breite der Tabelle steuern können, fügen Sie in alle Tabellenzellen einen linken Abstand und in die gesamte Tabelle einen negativen linken Rand ein.

table {
    margin-left: -20px;
    width: 720px;
}

table td {
    padding-left: 20px;
}

Beachten Sie, dass die Breite der Tabelle die Auffüll- / Randbreite enthalten muss. Am obigen Beispiel beträgt die visuelle Breite der Tabelle 700 Pixel.

Dies ist nicht die beste Lösung, wenn Sie Rahmen für Ihre Tabellenzellen verwenden.

Dallas Clark
quelle

2

LÖSUNG

Ich fand, der beste Weg, um dieses Problem zu lösen, war eine Kombination aus Versuch und Irrtum und Lesen dessen, was vor mir geschrieben stand:

http://jsfiddle.net/MG4hD/

Wie Sie sehen können, habe ich einige ziemlich knifflige Dinge im Gange ... aber der Hauptkicker dafür, dass dies gut aussieht, sind:

ELTERNELEMENT (UL): Grenzkollaps: getrennt; Randabstand: .25em; Rand links: -.25em;
KINDERELEMENTE (LI): Anzeige: Tabellenzelle; vertikal ausrichten: Mitte;

HTML

<ul>
<li><span class="large">3</span>yr</li>
<li>in<br>stall</li>
<li><span class="large">9</span>x<span class="large">5</span></li>
<li>on<br>site</li>
<li>globe</li>
<li>back<br>to hp</li>
</ul>

CSS

ul { border: none !important; border-collapse: separate; border-spacing: .25em; margin: 0 0 0 -.25em; }
li { background: #767676 !important; display: table-cell; vertical-align: middle; position: relative; border-radius: 5px 0; text-align: center; color: white; padding: 0 !important; font-size: .65em; width: 4em; height: 3em; padding: .25em !important; line-height: .9; text-transform: uppercase; }

Oneezy
quelle

1

Nach Cians Lösung, einen Rand anstelle eines Randes festzulegen, habe ich festgestellt, dass Sie die Rahmenfarbe auf transparent setzen können, um zu vermeiden, dass die Farbe farblich an den Hintergrund angepasst werden muss. Funktioniert in FF17, IE9, Chrome v23. Scheint eine anständige Lösung zu sein, vorausgesetzt, Sie brauchen nicht auch eine tatsächliche Grenze.

Vitaly Tschernobyl
quelle

1

<!DOCTYPE html>
<html>
<head>
<style>
table{
border-spacing: 16px 4px;
}

 td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>		
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>		
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
  </tr>
</table>

</body>
</html>

Erweitern Sie das Snippet

Die Verwendung von Polstern ist nicht die richtige Vorgehensweise. Sie kann das Aussehen ändern, ist aber nicht das, was Sie wollten. Dies kann Ihr Problem lösen.

Sengottaian Karthik
quelle

Diese Lösung ist bereits veröffentlicht, es sind keine 2 Antworten erforderlich, die dasselbe sagen.

Ason

1

Sie können beide verwenden:

padding-right:10px;

padding-right:10%;

Aber es ist besser, mit % zu verwenden .

Muhammad Awais
quelle

1

Ich habe gestimmt, aber Sie haben vielleicht erklärt, warum es besser ist, es zu verwenden%

Mawg sagt, Monica

1

Normalerweise wird% verwendet, um die Reaktion zu ermöglichen.

Muhammad Awais

1

Plus eins - vielleicht könnten Sie Ihre Antwort bearbeiten, um dies zu sagen? Nicht jeder, der liest, könnte die Kommentare lesen. Wenn Sie einen Link zu etwas über responsives Design hinzufügen möchten, noch besser :-)

Mawg sagt, Monica

1

Wenn das Auffüllen für Sie nicht funktioniert, können Sie auch zusätzliche Spalten hinzufügen und mithilfe der Breite einen Rand festlegen <colgroup>. Keine der oben genannten Polsterungslösungen funktionierte für mich, als ich versuchte, dem Zellrand selbst einen Rand zu geben, und dies löste am Ende das Problem:

<table>
  <colgroup>
    <col>
    <col width="20px">
    <col>
  </colgroup>
  <tr>
     <td>data</td>
     <td></td>
     <td>more data</td>
   </tr>
</table>

Gestalten Sie die Ränder der Tabellenzellen mit: n-tes Kind so, dass die zweite und dritte Spalte eine einzelne Spalte zu sein scheinen.

table tr td:nth-child(2) { border: 1px solid black; border-right:0; }
table tr td:nth-child(3) { border: 1px solid black; border-left:0; }

Esra
quelle

Das maskiert das Problem und beantwortet es nicht. Niemand wird lernen, wie man es richtig macht

Mawg sagt, Monica

CSS Cell Margin

Antworten:

LÖSUNG