如何在表格行上添加边距

Posted

技术标签:

【中文标题】如何在表格行上添加边距【英文标题】：How to add margin on table row 【发布时间】：2019-05-27 18:05:04 【问题描述】：

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

如果可能，请向我展示您的代码。

【问题讨论】：

请添加您的 html 和 CSS 你可以写一个新的。它只是一个简单的表格。 "如果可能，请向我展示您的代码。"您只需要显示您使用过的代码.. 我尝试在 上添加边距，但没有成功。请告诉我？ 你不能给tr元素添加边距，只有td，最好用padding来做样式标签和使用tr > td padding: 20px; 【参考方案1】：

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

【讨论】：

【参考方案2】：

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;

【讨论】：

如果我已经有了纯黑色边框怎么办。我可以同时使用吗？【参考方案3】：

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

注意：该属性仅在border-collapse分离时有效。

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

【讨论】：

【参考方案4】：

您不能给表格行留出边距。您可以为表格提供边框折叠和边框间距，或者为表格行提供边框并将其颜色更改为表格背景颜色。请参考以下链接。

谢谢

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>

【讨论】：

【参考方案5】：

最佳选择：

  *box-sizing: border-box

  table 
      border-collapse: separate;
    
  tr > td 
      display: inline-block;
      margin-top: 1rem;
      border-right: 1px solid black;
      border-bottom: 1px solid black;
      border-top: 1px solid black;
    
  tr > td:first-of-type 
      border-left: 1px solid black;

【讨论】：

【参考方案6】：

尝试将其用于设计

或访问demo获取更多代码

@import "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css";

.caseTableWrap 
  margin-bottom: 50px;
      background: #f5f5f5;
      padding: 20px; 

.caseTable 
  border-collapse: separate;
  border-spacing: 0 20px; 
  .caseTable tr 
    -webkit-box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.05);
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s; 
    .caseTable tr + tr 
      cursor: pointer; 
      .caseTable tr + tr:hover 
        -webkit-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
        transform: translateY(-2px);
        -webkit-box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2); 
    .caseTable tr .caseTableData:last-child, .caseTable tr th:last-child, .caseTable tr td:last-child 
      max-width: 220px; 
    .caseTable tr th 
      border: none;
      font-size: 18px;
      font-weight: 500; 
      .caseTable tr th:first-child 
        border-radius: 8px 0 0 8px; 
      .caseTable tr th:last-child 
        border-radius: 0 8px 8px 0; 
    .caseTable tr td 
      border: none;
      position: relative; 
      .caseTable tr td:first-child 
        border-radius: 8px 0 0 8px; 
      .caseTable tr td:last-child 
        border-radius: 0 8px 8px 0; 
    .caseTable tr .caseTableData, .caseTable tr th, .caseTable tr td 
      background: #fff;
      padding: 20px;
      position: relative; 
      .caseTable tr .caseTableData p, .caseTable tr th p, .caseTable tr td p 
        color: #484848;
        font-size: 16px;
        font-weight: 400; 
        <div class="caseTableWrap">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="caseTableInner">
                            <h3 class="secTitle">
                                <div class="text">
                                    Recent Case
                                </div>
                            </h3>
                            <div class="caseTableWrap table-responsive">
                                <table class="table caseTable">
                                    <tr>
                                        <th>Case ID</th>
                                        <th>Created Date</th>
                                        <th>Expiry Date</th>
                                        <th>Status</th>
                                    </tr>
                                    <tr>
                                        <td>75814</td>
                                        <td>01 January 2020</td>
                                        <td>30 January 2020</td>
                                        <td>Delivered</td>
                                    </tr>
                                    <tr>
                                        <td>75814</td>
                                        <td>01 January 2020</td>
                                        <td>30 January 2020</td>
                                        <td>Delivered</td>
                                    </tr>
                                    <tr>
                                        <td>75814</td>
                                        <td>01 January 2020</td>
                                        <td>30 January 2020</td>
                                        <td>Delivered</td>
                                    </tr>
                                    <tr>
                                        <td>75814</td>
                                        <td>01 January 2020</td>
                                        <td>30 January 2020</td>
                                        <td>Delivered</td>
                                    </tr>
                                    <tr>
                                        <td>75814</td>
                                        <td>01 January 2020</td>
                                        <td>30 January 2020</td>
                                        <td>Delivered</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

【讨论】：

以上是关于如何在表格行上添加边距的主要内容，如果未能解决你的问题，请参考以下文章

如何在表格行上使用 slideDown（或显示）功能？

如何在 iOS 中设置表格视图的上边距？

如何无条件地将绿色添加图标放在插入行上

如何在 Swift 中为 UITableView 设置左右边距

模拟网格行上的单击事件

Vim，如何在每一行下面 添加一个或多个空白行。