How to increase the distance between table columns in HTML

Question

Let s say I wanted to create a single-rowed table with 50 nbsp pixels in between each column  but 10 nbsp pixels padding on top and the bottom   How would I do this in HTML CSS

User · Answer

A better solution than selected answer would be to use border-size rather than border-spacing. The main problem with using border-spacing is that even the first column would have a spacing in the front.

For example,

_x000D_

table {_x000D_
  border-collapse: separate;_x000D_
  border-spacing: 80px 0;_x000D_
}_x000D_
_x000D_
td {_x000D_
  padding: 10px 0;_x000D_
}

_x000D_

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

_x000D_

To avoid this use: border-left: 100px solid #FFF; and set border:0px for the first column.

For example,

_x000D_

td,th{_x000D_
  border-left: 100px solid #FFF;_x000D_
}_x000D_
_x000D_
 tr>td:first-child {_x000D_
   border:0px;_x000D_
 }

_x000D_

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

_x000D_

User · Answer

If you need to give a distance between two rows use this tag  margin-top  10px  important

User · Answer

Try  padding   10px 10px 10px 10px

User · Answer

Set the width of the  lt td gt s to 50px and then add your  lt td gt    another fake  lt td gt   Fiddle    x000D   x000D  table tr td empty   x000D    width  50px  x000D    x000D     x000D  table tr td   x000D    padding-top  10px  x000D    padding-bottom  10px  x000D    x000D   lt table gt  x000D     lt tr gt  x000D       lt td gt First Column lt  td gt  x000D       lt td gt  lt  td gt  x000D       lt td gt Second Column lt  td gt  x000D       lt td gt  lt  td gt  x000D       lt td gt Third Column lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    Code Explained   The first CSS rule checks for empty td s and give them a width of 50px then the second rule give the padding of top and bottom to all the td s

User · Answer

There isn t any need for fake  lt td gt s  Make use of border-spacing instead  Apply it like this   HTML    lt table gt     lt tr gt       lt td gt First Column lt  td gt       lt td gt Second Column lt  td gt       lt td gt Third Column lt  td gt     lt  tr gt   lt  table gt    CSS   table     border-collapse  separate    border-spacing  50px 0     td     padding  10px 0      See it in action

User · Answer

If I understand correctly  you want this fiddle    x000D   x000D  table   x000D    background  gray  x000D    x000D  td       x000D    display  block  x000D    float  left  x000D    padding  10px 0  x000D    margin-right 50px  x000D    background  white  x000D    x000D  td last-child   x000D    margin-right  0  x000D    x000D   lt table gt  x000D     lt tr gt  x000D       lt td gt Hello HTML  lt  td gt  x000D       lt td gt Hello CSS  lt  td gt  x000D       lt td gt Hello JS  lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

You can just use padding  Like so   http   jsfiddle net davidja KG8Kv   HTML      lt table gt           lt tr gt               lt td gt item1 lt  td gt               lt td gt item2 lt  td gt               lt td gt item2 lt  td gt           lt  tr gt       lt  table gt    CSS   td  padding 10px 25px 10px 25px     OR   tr td first-child  padding-left 0px    td  padding 10px 0px 10px 50px

[html] How to increase the distance between table columns in HTML?

Examples related to html

Examples related to css

Examples related to html-table

Examples related to padding