Question

我想在每个QString currentDate() { return QDate::currentDate().toString("MM/dd/yy"); }代码后添加换行符，以便下一行数据之间存在差距。我已经包括了我认为应该工作但唉，没有运气。基本上，如果有10行数据将每个tr与新行分开。

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

UPDATE ：屏幕抓取以准确显示我希望行间距显示的方式。注意每行底部的间距。

＆＃13;

tr

＆＃13;

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

＆＃13;

Answer 1

我用你的代码玩了一点，最后得到了这个：
（我只在margin-bottom: 3em;）中添加了table tr td:last-child { … } 如果您想要进行一些修改，请随意发表评论。

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>

希望它有所帮助。

Answer 2

如果我正确理解你，你只想在每一行之间留一条空行。如果是这种情况，那么您希望定位 td 标记而不是 tr 标记。您可以将padding-bottom: 1em;添加到所有行，并指定最后一行包含padding-bottom: 0;。试试这个解决方案：

＆＃13;

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;
      padding-bottom: 1em;
   }
   table td:before {
      content: attr(data-label);
      float: left;
      font-weight: bold;
      text-transform: uppercase;
   }
   table td:last-child {
      content: "" !important;
      white-space: pre !important;
   }
   
   table tr:last-child td:last-child{
       padding-bottom: 0;
   }
}

＆＃13;

<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>
        <br/>
        <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>

＆＃13;

Answer 3

奥利维尔的回答很好，但我认为边界间距更合适。填充会在单元格中添加空白区域，这可能会产生不必要的视觉后果（例如，显示边框时）。根据你的要求，你可能想要在单元格之间留空空间。我会推荐像这样的东西

table {
    border-collapse: separate;
    border-spacing: 0 10px; // or 0.85em but i would recommend using pixels here
}

0表示水平间距（您不需要），10px表示垂直间距（即行间距）。

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

3 个答案: