How to increase the distance between table columns in HTML?

css, html, html-table, padding

Solution

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.

Problem

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?

Original source