How to increase the distance between table columns in 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.
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.