Wie kann man den Abstand zwischen Tabellenspalten in HTML vergrößern?

Nehmen wir an, ich wollte eine einzeilige Tabelle mit 50 Pixeln zwischen jeder Spalte, aber 10 Pixeln oben und unten erstellen.

Wie würde ich das in HTML/CSS machen?

Da braucht es keine Fälschung <td>s. Gebrauch machen von border-spacing stattdessen. Wende es so an:

HTML:

<table>
  <tr>
    <td>First Column</td>
    <td>Second Column</td>
    <td>Third Column</td>
  </tr>
</table>

CSS:

table {
  border-collapse: separate;
  border-spacing: 50px 0;
}

td {
  padding: 10px 0;
}

Sehen Sie es in Aktion.

Legen Sie die Breite fest <td>s zu 50px und fügen Sie dann Ihre hinzu <td> + eine weitere Fälschung <td>

Geige.

table tr td:empty {
  width: 50px;
}
  
table tr td {
  padding-top: 10px;
  padding-bottom: 10px;
}

<table>
  <tr>
    <td>First Column</td>
    <td></td>
    <td>Second Column</td>
    <td></td>
    <td>Third Column</td>
  </tr>
</table>

Code erklärt:

Die erste CSS-Regel sucht nach leeren TDs und gibt ihnen eine Breite von 50 Pixel, dann gibt die zweite Regel allen TDs die Auffüllung von oben und unten.

Sie können einfach Polsterung verwenden. So:

http://jsfiddle.net/davidja/KG8Kv/

HTML

   <table>
        <tr>
            <td>item1</td>
            <td>item2</td>
            <td>item2</td>
        </tr>
    </table>

CSS

 td {padding:10px 25px 10px 25px;}

ODER

 tr td:first-child {padding-left:0px;}
 td {padding:10px 0px 10px 50px;}

Wenn ich das richtig verstehe, wollen Sie das Geige.

table {
  background: gray;
}
td {    
  display: block;
  float: left;
  padding: 10px 0;
  margin-right:50px;
  background: white;
}
td:last-child {
  margin-right: 0;
}

<table>
  <tr>
    <td>Hello HTML!</td>
    <td>Hello CSS!</td>
    <td>Hello JS!</td>
  </tr>
</table>

Eine bessere Lösung als die ausgewählte Antwort wäre die Verwendung von Border-Size anstelle von Border-Spacing. Das Hauptproblem bei der Verwendung von Border-Spacing ist, dass selbst die erste Spalte vorne einen Abstand hätte.

Zum Beispiel,

table {
  border-collapse: separate;
  border-spacing: 80px 0;
}

td {
  padding: 10px 0;
}

<table>
  <tr>
    <td>First Column</td>
    <td>Second Column</td>
    <td>Third Column</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Um diese Verwendung zu vermeiden: border-left: 100px solid #FFF; und einstellen border:0px für die erste Spalte.

Zum Beispiel,

td,th{
  border-left: 100px solid #FFF;
}

 tr>td:first-child {
   border:0px;
 }

<table id="t">
  <tr>
    <td>Column1</td>
    <td>Column2</td>
    <td>Column3</td>
  </tr>
  <tr>
    <td>1000</td>
    <td>2000</td>
    <td>3000</td>
  </tr>
</table>

Versuchen

padding : 10px 10px 10px 10px;

Wenn Sie einen Abstand zwischen zwei Zeilen angeben müssen, verwenden Sie dieses Tag

margin-top: 10px !important;