带空格的 HTML 表格 [重复]

Question

这是一个简单的问题，但对于那些多年不使用 html 的人来说，这是非常令人沮丧的。我的 html 表可以在下面看到：

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

下面的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>

这会给我没有空格的表格。如何实现与此类似的东西：

Answer 1

相应地改变样式

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>

Answer 2

您可以为表格单元格添加内边距：

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>