HTML Table with spaces

Question

This is an easy question, but it's super frustrating for someone who is not using html for ages. My html table can be seen at the following:

https://jsfiddle.net/mr_muscle/Lw5o7ary/

with below html:

  <table>
    <thead>
      <tr>
        <th>Account status:</th>
        <th>Portfolios invested:</th>
        <th>Date joined:</th>
        <th>MangoPay status:</th>
        <th>NorthRow status:</th>
        <th>Investor type:</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>status</td>
        <td>Number of portfolios</td>
        <td>17 Feb, 2019</td>
        <td>Approved</td>
        <td>Approved</td>
        <td>Inexperienced</td>
      </tr>
      <tr>
        <td colspan='2'>Suspend user</td>
        <td colspan='2'>Member for 1 y, 10m</td>
        <td>Change</td>
      </tr>
    </tbody>

Which will give me tables without spaces. How to achieved something similar to this:

Take a look on [`border-spacing` at MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing). — Jax-p, Jun 21 '21 at 14:47

score 2 · Answer 1 · edited Jun 21 '21 at 15:04

Change Style accordingly

table {
  border-collapse: separate;
  border-spacing: 0 15px;
}

th {
  margin: 10px;
  padding: 25px;
}

td {
  margin: 51px;
  padding: 29px;
}

<table>
  <thead>
    <tr>
      <th>Account status:</th>
      <th>Portfolios invested:</th>
      <th>Date joined:</th>
      <th>MangoPay status:</th>
      <th>NorthRow status:</th>
      <th>Investor type:</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>status</td>
      <td>Number of portfolios</td>
      <td>17 Feb, 2019</td>
      <td>Approved</td>
      <td>Approved</td>
      <td>Inexperienced</td>
    </tr>
    <tr>
      <td colspan='2'>Suspend user</td>
      <td colspan='2'>Member for 1 y, 10m</td>
      <td>Change</td>
    </tr>
  </tbody>
</table>

score 1 · Answer 2 · edited Jun 21 '21 at 15:06

You can add a padding to your table cells:

td {
  padding-left: 20px;
  padding-right: 20px;
}

<table>
  <thead>
    <tr>
      <th>Account status:</th>
      <th>Portfolios invested:</th>
      <th>Date joined:</th>
      <th>MangoPay status:</th>
      <th>NorthRow status:</th>
      <th>Investor type:</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>status</td>
      <td>Number of portfolios</td>
      <td>17 Feb, 2019</td>
      <td>Approved</td>
      <td>Approved</td>
      <td>Inexperienced</td>
    </tr>
    <tr>
      <td colspan='2'>Suspend user</td>
      <td colspan='2'>Member for 1 y, 10m</td>
      <td>Change</td>
    </tr>
  </tbody>
</table>

HTML Table with spaces

2 Answers2

Linked