html - 在每个 tr 标记行后插入换行符

Question

我想在每个 tr 标记后添加一个换行符，以便在下一行数据之间有一个间隙。我已经包含了我认为应该起作用的东西，但是可惜，运气不好。基本上，如果有 10 行数据，则每个 tr 都用新行分隔。

如果有人能指出我的错误，我将不胜感激。非常感谢

更新:截屏以准确显示我希望行间距显示的方式。注意每行底部的间距。

table tr {
   /*  background: #f8f8f8;*/
   /*border: 1px solid #ddd;*/
}
table th, table td {
   text-align: left;
}
table th {
   font-size: .85em;
   letter-spacing: .1em;
   text-transform: uppercase;
}
@media screen and (max-width: 600px) {
   table {
      border: 1px solid #eee;
      border-radius: 5px !important;
   }
   table thead {
      border: none;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
   }
   table tr {
      /*    border-bottom: 1px solid #ddd;*/
      display: block;
      /*          margin-bottom: .625em;*/
   }
   table td {
      /*    border-bottom: 1px solid #ddd;*/
      display: block;
      font-size: .85em;
      text-align: left;
      /*          margin-bottom: .625em;*/
   }
   table td:before {
      content: attr(data-label);
      float: left;
      font-weight: bold;
      text-transform: uppercase;
   }
   table td:last-child {
      /*          border-bottom: 0;*/
      content: "" !important;
      white-space: pre !important;
   }
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container">
        <table class="table table-striped">
          <caption>
            <h3>Caption</h3>
          </caption>
          <thead>
            <tr>
              <th scope="col">Due Date</th>
              <th scope="col">Amount</th>
              <th scope="col">Period</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td data-label="Due Date" scope="row">04/01/2016</td>
              <td data-label="Amount">$1,190</td>
              <td data-label="Period">03/01/2016 - 03/31/2016</td>
            </tr>
            <tr>
              <td data-label="Due Date" scope="row">03/01/2016</td>
              <td data-label="Amount">$2,443</td>
              <td data-label="Period">02/01/2016 - 02/29/2016</td>
            </tr>
            <tr>
              <td data-label="Due Date" scope="row">03/01/2016</td>
              <td data-label="Amount">$1,181</td>
              <td data-label="Period">02/01/2016 - 02/29/2016</td>
            </tr>
            <tr>
              <td data-label="Due Date" scope="row">02/01/2016</td>
              <td data-label="Amount">$842</td>
              <td data-label="Period">01/01/2016 - 01/31/2016</td>
            </tr>
          </tbody>
        </table>
      </div>

Answer 1

我试了一下你的代码，结果是这样的:
(我只在 table tr td:last-child { … } 中添加了 margin-bottom: 3em;)
如果您需要一些修改，请随时发表评论。

table th,
table td {
  text-align: left;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media screen and (max-width: 600px) {
  table {
    border: 1px solid #eee;
    border-radius: 5px !important;
  }
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  table tr {
    display: block;
  }
  table td {
    display: block;
    font-size: .85em;
    text-align: left;
  }
  table td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  table tr td:last-child {
    margin-bottom: 3em;
    content: "" !important;
    white-space: pre !important;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container">
  <table class="table table-striped">
    <caption>
      <h3>Caption</h3>
    </caption>
    <thead>
      <tr>
        <th scope="col">Due Date</th>
        <th scope="col">Amount</th>
        <th scope="col">Period</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="Due Date" scope="row">04/01/2016</td>
        <td data-label="Amount">$1,190</td>
        <td data-label="Period">03/01/2016 - 03/31/2016</td>
      </tr>
      <tr>
        <td data-label="Due Date" scope="row">03/01/2016</td>
        <td data-label="Amount">$2,443</td>
        <td data-label="Period">02/01/2016 - 02/29/2016</td>
      </tr>
      <tr>
        <td data-label="Due Date" scope="row">03/01/2016</td>
        <td data-label="Amount">$1,181</td>
        <td data-label="Period">02/01/2016 - 02/29/2016</td>
      </tr>
      <tr>
        <td data-label="Due Date" scope="row">02/01/2016</td>
        <td data-label="Amount">$842</td>
        <td data-label="Period">01/01/2016 - 01/31/2016</td>
      </tr>
    </tbody>
  </table>
</div>

希望对您有所帮助。