如何在表格行上增加边距

Question

我想在表格的行之间添加空格，如下图所示：

请尽可能向我展示您的代码。

Answer 1

border-spacing属性适用于这种情况。

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

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

或者您可以使用hacky方法。这样就给出了表行i

之间的页边空白外观

tr{ 
    border: 5px solid white;
}

Answer 2

border-spacing属性设置相邻单元格的边界之间的距离。

注意：该属性仅在边框折叠单独存在时有效。

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

Answer 3

您不能为表行提供边距。您可以为表格赋予边框塌陷和边框间距，或为表格行赋予边框并将其颜色更改为表格背景颜色。请参考下面的链接。

谢谢

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 4

您可以使用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