web-dev-qa-db-de.com

CSS Cell Margin

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

79
Tom

Wenden Sie dies auf Ihren ersten <td> an:

padding-right:10px;

HTML-Beispiel:

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

Ein Wort der Warnung: Obwohl padding-right Ihr spezielles (visuelles) Problem lösen könnte, ist es nicht der richtige Weg, Abstand zwischen Tabellenzellen hinzuzufügen. Was padding-right für eine Zelle tut, ist ähnlich wie bei den meisten anderen Elementen: Es fügt Leerzeichen in der Zelle hinzu. Wenn die Zellen keine Rahmen- oder Hintergrundfarbe oder etwas anderes haben, das das Spiel verrät, kann dies den Effekt des Festlegens 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 generieren rechteckige Boxen mit Inhalt und Grenzen. Zellen sind auch gepolstert . Interne Tabellenelemente haben nicht Ränder.

Was ist dann der "richtige" Weg? Wenn Sie das cellspacing-Attribut der Tabelle ersetzen möchten, ist border-spacing (bei deaktiviertem border-collapse) ein Ersatz. Wenn jedoch "Randbereiche" pro Zelle erforderlich sind, bin ich nicht sicher, wie dies mit CSS korrekt erreicht werden kann. Der einzige Hack, den ich mir vorstellen kann, ist, padding 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 auch im obigen Punkt irren (was großartig wäre zu wissen! Ich hätte auch gerne eine Tabellen-Zellenrand-CSS-Lösung).

Prost!

143
ravi

Wenn Sie die Auffüllung nicht verwenden können (beispielsweise haben Sie in td Ränder), versuchen Sie dies

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

Mir ist klar, dass dies ziemlich spät ist, aber für das Protokoll können Sie dazu auch CSS-Selektoren verwenden (ohne Inline-Styles). Dieses CSS wendet die erste Spalte jeder Zeile auf:

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

Und das wäre dein HTML, Sans CSS !:

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

Dies ermöglicht ein wesentlich eleganteres Markup, insbesondere wenn Sie viele spezifische Formatierungen mit CSS vornehmen müssen. 

14
Rob

margin 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.

14
Cian

Das kannst du 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.

8
Trebor

Versuchen Sie padding-right. Sie dürfen keine margin zwischen Zellen setzen.

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

Verwenden von border-collapse: separate; hat bei mir nicht funktioniert, da ich nur einen Rand zwischen den Tabellenzellen brauche, die nicht an den Seiten des Tisches liegen.

Ich habe mir die nächste Lösung ausgedacht:

-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>
4
Robin

Diese Lösung funktioniert für td, die sowohl border als auch padding fü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 auch ohne inline-block und einem Satz width

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>

4
LGSon

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

2
jerebear

LÖSUNG

Ich fand den besten Weg, dieses Problem zu lösen, war eine Kombination aus Versuch und Irrtum und Lesen, was vor mir geschrieben wurde:

http://jsfiddle.net/MG4hD/


Wie Sie sehen, habe ich ein paar ziemlich knifflige Sachen ... aber der Hauptkicker dafür, dass dies gut aussieht, sind: 

Elternelement (UL): Border-Collapse: Separate; Randabstand: .25em; Rand links: -.25em; 
KINDELEMENTE (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; }
2
Oneezy

Wenn Sie die Breite der Tabelle steuern können, fügen Sie in alle Tabellenzellen eine linke Auffüllung 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. Wenn Sie das obige Beispiel verwenden, beträgt die sichtbare Breite der Tabelle 700px.

Dies ist nicht die beste Lösung, wenn Sie Rahmen in Ihren Tabellenzellen verwenden.

2
Dallas Clark

Sie können beide verwenden:

padding-right:10px;

padding-right:10%;

Aber es ist besser mit% zu verwenden.

1
Muhammad Awais

Nach Cians Lösung, einen Rand anstelle eines Rands festzulegen, habe ich festgestellt, dass Sie die Randfarbe auf transparent setzen können, um zu vermeiden, dass der Hintergrund farblich angepasst wird. Funktioniert in FF17, IE9, Chrome v23. Scheint eine anständige Lösung zu sein, vorausgesetzt, Sie benötigen nicht auch eine tatsächliche Grenze.

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>

Die Verwendung von Polsterung ist keine korrekte Methode, es kann das Aussehen ändern, aber es ist nicht das, was Sie wollten. Dies kann Ihr Problem lösen.

1
Karthik Sen

Wenn das Auffüllen nicht funktioniert, müssen Sie zusätzliche Spalten hinzufügen und mithilfe von <colgroup> einen Rand über die Breite festlegen. Keine der oben genannten Polsterlösungen funktionierte für mich, als ich versuchte, der Zellgrenze selbst einen Rand zu geben, und das hat das Problem letztendlich gelöst:

<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: nth-child, sodass die zweite und dritte Spalte als eine einzige Spalte erscheinen.

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; }
0
Ezra