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

Question

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

Answer 1

There isn't any need for fake <td>s. Make use of border-spacing instead. Apply it like this:
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;
}
See it in action.

Answer 2

Set the width of the <td>s to 50px and then add your <td> + another fake <td>
Fiddle.
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 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.

Answer 3

You can just use padding. Like 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;}
OR
tr td:first-child {padding-left:0px;}
td {padding:10px 0px 10px 50px;}

Answer 4

If I understand correctly, you want this fiddle.
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>

Answer 5

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,
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>
To avoid this use: border-left: 100px solid #FFF; and set border:0px for the first column.
For example,
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>

Answer 6

Try
padding : 10px 10px 10px 10px;

Answer 7

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