How to increase the distance between table columns in HTML?
Solution 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.
Solution 2
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
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
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 5
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;}
idude
Updated on July 08, 2022Comments
-
idude almost 2 years
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?
-
Mohammad Areeb Siddiqui almost 11 yearsyou didn't stated you want it for some columns!
-
Andres Scarpone almost 9 yearsThe downside here is if you're striping rows or coloring them on hover: browsers won't extend the background color across the border space.
-
Ani Menon about 8 yearsThis is not the best answer: It leaves a space in the left of first column: Refer this
-
Pwnball over 7 yearsnot relevant, also you should not use !important without a very good reason to do so.
-
png over 5 yearsThe fiddle attached to your post looks incomplete
-
Timmmm over 5 yearsThis makes a big white block. Wouldn't it be more sensible to use
padding-left
ormargin-left
instead? -
Bruno Eberhard over 2 yearsThe block doesn't have to be #fff. 'transparent' works fine.