Как добавить поля в строке таблицы

Question

Я хочу добавить пробел между строками таблицы, как на картинке ниже:

Если возможно, покажите мне свой код.

Answer 1

Свойство border-spacing устанавливает расстояние между границами соседних ячеек.

Примечание: Это свойство работает только в том случае, если граница-коллапс отделена.

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

Answer 2

Вы не можете дать поле для строки таблицы.Вы можете либо задать бордюрный коллапс и интервал границ для таблицы, либо задать границу для строки таблицы и изменить ее цвет на цвет фона таблицы.Пожалуйста, смотрите ссылку ниже.

Спасибо

http://jsfiddle.net/x1hphsvb/10966/

table{
  border-collapse: separate;
  border-spacing: 0 20px;
  background-color: #e3e7ee
}

table tr td{
  padding:20px !important;
  background-color:white;
}

/* this is the second option */

tr{
  /* border:2px solid #e3e7ee !important */
}

<table class="table ">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>

Answer 3

Вы можете использовать border-spacing.Вот простой пример.

table, th, td {
  background: #ffffff;
  padding: 5px;
}
table {
  background: #999999;
  border-spacing: 15px;
}

<h2>Border Spacing</h2>
<p>Border spacing specifies the space between the cells.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

<p>Try to change the border-spacing to 5px.</p>

https://www.w3schools.com/html/html_tables.asp

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_cellspacing

Answer 4

Свойство border-spacing будет работать для этого конкретного случая.

table {
  border-collapse:separate; 
  border-spacing: 0 1em;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing

Или вы можете использовать хакерский подход.Это дает вид полей между строками таблицы я

tr{ 
    border: 5px solid white;
}