How to increase the distance between table columns in HTML?
HtmlCssHtml TablePaddingHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
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.
Solution 2 - Html
Set the width of the <td>
s to 50px
and then add your <td>
+ another fake <td>
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.
Solution 3 - Html
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>
Solution 4 - Html
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;}
Solution 5 - Html
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>
Solution 6 - Html
Try
padding : 10px 10px 10px 10px;
Solution 7 - Html
If you need to give a distance between two rows use this tag
margin-top: 10px !important;