I would like to add a line break after each `tr` tag so there a gap between the next row of data. I have included what I thought should work but alas, no luck. Basically, if there are 10 rows of data separate each `tr` with a new line.

I would be grateful if someone could point out my error. many thanks

**UPDATE**: Screen grab to show exactly how I want the row spacing to appear. Notice the spacing at the bottm of each row.

[![enter image description here](https://i.stack.imgur.com/d8YHq.png)](https://i.stack.imgur.com/d8YHq.png)

```css
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;
   }
}
```

```html
  <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>
```