Question

＆＃13;

var empobj2=[{app:"new",comment:"sjkk",date:"02/10/2018"},{app:"new",comment:"sjkk",date:"02/10/2018"},{app:"new",comment:"sjkk",date:"02/10/2018"}];

＆＃13;

<table class="table" style="width:100%;">
<thead style="background-color:#FDDDD2">   
<tr>
<th style="width:30%;text-align: center;">Appreciated To</th>
<th style="width:40%;text-align: center;">Comment</th>
<th style="width:30%;text-align: center;">Date Created</th>
</tr>
</thead>
<tbody>   
<tr ng-repeat="caserecord in empobj2" >
<td style="text-align:center;">{{caserecord.app}}</td>
<td style="text-align:justify;">{{caserecord.comment}}</td>
<td style="text-align:center;">{{caserecord.date}}</td>
</tr>
</tbody>
</table>

＆＃13;

嗨，这是我的代码我希望将每一行显示为一个框。在两排之间应该有一些空间。谢谢提前。

Answer 1

试试这个css：

tbody > tr > td {
  padding-bottom: 10em;
}

调整em或px中的值，无论你喜欢什么值。

如果您确切需要该表格，请尝试将id="idvalue"添加到<table>，并将目标设为

#idvalue > tr > td {
  padding-bottom: 10em;
}

如果你想从表格的第一行和标题行之间的差距开始，你也可以使用padding-top：

#idvalue > tr > td {
  padding-top: 10em;
}

编辑：根据评论，这是新的解决方案：

更改HTML：

<tbody>
  <tr class="blank">
    <td colspan="3"></td>
  </tr>
  <tr>
   <td style="text-align:center;">{{caserecord.app}}</td>
   <td style="text-align:justify;">{{caserecord.comment}}</td>
   <td style="text-align:center;">{{caserecord.date}}</td>
  </tr>
</tbody>

添加到您的CSS中：

.table {
  border-collapse: collapse;
}

.table tr {
  border: 5px solid brown;
}

.table .blank{
  height: 20px; 
  border: none;
}

说明：我在tbody行前面添加了一个没有边框的空白行。看起来像空的空间。我还在你的其他行和标题上设置了边框。您可以随意自定义这些。

将表格行显示为框

1 个答案: