Frage

In meinem HTML-Dokument, habe ich eine Tabelle mit zwei Spalten und mehr Zeilen. Wie kann ich den Raum zwischen der ersten und der zweiten Spalte mit CSS erhöhen? Ich habe versucht, die Anwendung "margin-right: 10px;" zu jedem der Zellen auf der linken Seite, aber ohne Wirkung.

War es hilfreich?

Lösung

Wenden Sie diese auf Ihrem ersten <td>: 

padding-right:10px;

HTML-Beispiel: 

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

Andere Tipps

Ein Wort der Warnung: wenn padding-right könnte Ihr spezielles (visuell) Problem lösen, ist es nicht der richtige Weg, zwischen Tabellenzellen hinzufügen Abstand. Was padding-right tut für eine Zelle ist ähnlich zu dem, was es tut, für die meisten anderen Elemente: es Raum fügt innerhalb der Zelle. Wenn die Zellen nicht über eine Grenze oder Hintergrundfarbe oder etwas anderes haben, dass das Spiel verschenkt, kann dies den Effekt der Einstellung der Raum zwischen den Zellen nachahmen, aber sonst nicht.

Als jemand erwähnt, Randspezifikationen ignoriert werden für Tabellenzellen:

CSS 2.1 Spezifikation - Tabellen - Visuelle Gestaltung von Tabelleninhalten

  

Interne Tabellenelemente erzeugen   rechteckige Kästen mit Inhalt und   Grenzen. Die Zellen haben auch Polsterung.   Interne Tabellenelemente haben keine   Margen.

Was ist die „richtige“ Art und Weise dann? Wenn Sie schauen, um das cellspacing Attribut der Tabelle zu ersetzen, dann border-spacing (mit border-collapse deaktiviert) ist ein Ersatz. wenn pro-Zelle „Ränder“ sind jedoch erforderlich, bin ich nicht sicher, wie das korrekt mit CSS erreicht werden. Der einzige Hack, den ich denken kann, ist padding zu verwenden, wie oben, vermeiden Sie jedes Styling der Zellen (Hintergrundfarben, Ränder, etc.) und stattdessen Behälter DIVs innerhalb der Zellen verwenden, um solches Styling zu implementieren.

Ich bin kein CSS-Experte, so konnte ich gut in der oben falsch sein (was wäre toll zu wissen! Ich würde auch eine Tabellenzelle Marge CSS-Lösung wie).

Cheers!

Wenn Sie nicht padding verwenden können (zB Sie Grenzen in td haben) versuchen, diese 

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

Ich weiß, das ziemlich spät, aber der Ordnung halber können Sie auch CSS-Selektoren, dies zu tun (die Notwendigkeit für Inline-Styles zu eliminieren.) Diese CSS padding auf die erste Spalte jeder Zeile gilt: 

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

Und dies würde Ihr HTML, CSS sans sein: 

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

Dies ermöglicht eine viel elegantere Markup, vor allem in Fällen, in denen Sie benötigen viele spezifische Formatierung mit CSS zu tun.

Marge leider nicht auf einzelne Zellen nicht funktioniert, aber Sie zusätzliche Spalten zwischen den beiden Zellen hinzufügen, könnten Sie ein Leerzeichen setzen wollen zwischen ... weitere Option ist eine gemeinsame Grenze mit der gleichen Farbe wie der Hintergrund zu verwenden ...

Sie können einfach tun: 

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

No CSS erforderlich ist :) Diese 10px Ihr Platz ist.

Versuchen padding-right. Sie sind nicht zu setzen margin die zwischen den Zellen erlaubt. 

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

Mit border-collapse:. Getrennt; hat für mich nicht, weil ich nur eine Marge in-zwischen den Tabellenzellen nicht auf den Seiten des Tisches müssen

Ich kam mit der nächsten Lösung:

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

Diese Lösung Arbeit für td ist, die sowohl border und padding für Styling brauchen.
 (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 jetzt ohne inline-block und einen 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>

Sie können keine einzelnen Spalten in einer Zelle auf diese Weise heraus. Meiner Meinung nach ist die beste Wahl ist eine style='padding-left:10px' auf der zweiten Spalte zu addieren und die Stile auf einem internen div oder Element anwenden. Auf diese Weise kann die Illusion eines größeren Raumes erreichen kann.

Wenn Sie die Kontrolle über die Breite des Tisches haben, legen Sie ein padding-left auf allen Tabellenzellen und legen Sie eine negative margin-left auf die gesamte Tabelle. 

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

table td {
    padding-left: 20px;
}

Beachten Sie, muss die Breite der Tabelle, die die Polsterung / Randbreite erweitert. Unter Verwendung des oben als Beispiel die visuelle Breite der Tabelle wird 700px.

Dies ist nicht die beste Lösung, wenn Sie Grenzen auf Tabellenzellen verwenden.

SOLUTION

Ich fand den besten Weg zur Lösung dieses Problems eine Kombination von Versuch und Irrtum war und zu lesen, was vor mir geschrieben:

http://jsfiddle.net/MG4hD/


Wie man sehen kann ich einige ziemlich knifflige Sachen passiert haben ... aber die Haupt Kicker dieses gut zu suchen bekommen sind:

Übergeordnetes Element (UL): border-collapse: getrennt; Grenzabstand: .25em; margin-left: -.25em;
Child-Elemente (LI): display: table-Zelle; vertical-align: middle;

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

Nach Cians Lösung, die eine Grenze anstelle einer Marge von Einstellung, entdeckte ich Sie Grenze Farbe transparent einstellen können mit der Farbe entsprechen dem Hintergrund zu vermeiden. Arbeitet in FF17, IE9, Chrome v23. Scheint wie eine anständige Lösung zur Verfügung gestellt Sie auch nicht eine tatsächliche Grenze müssen. 

<!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>

padding Verwendung ist nicht korrekt Art und Weise tun, kann es das Aussehen ändern, aber es ist nicht das, was Sie wollten. Dies kann Ihr Problem lösen.

Sie können beide verwenden: 

padding-right:10px;

padding-right:10%;

Aber es ist besser zu verwenden, um mit % .

Wenn Polsterung ist nicht für Sie arbeiten, um eine andere Arbeit zusätzliche Spalten hinzufügen und eine Marge über Breite mit <colgroup> eingestellt. Keine der Polsterung Lösungen, die oben waren für mich arbeiten, wie ich versuche, der Zelle Grenze selbst einen Spielraum zu geben, und das ist, was das Problem am Ende gelöst: 

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

Style der Grenzen der Tabellenzellen. N-te-Kind, so dass die zweite und dritte Spalte erscheint eine einzelne Spalte sein 

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; }
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top