如何将Angular表格每行显示为带间距的盒子样式？

嘿，这事儿很容易实现！咱们只需要调整CSS样式，不用改动太多现有的AngularJS和HTML结构，就能让每一行变成独立的盒子，还能留出漂亮的间距。

原始代码回顾 #

先把你的原始代码贴出来方便参考：

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

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

修改后的完整代码（带样式） #

我给你调整了CSS，并且把内联样式移到了外部，更易维护：

<style>
/* 表格基础样式 */
.table {
  width: 100%;
  border-collapse: separate; /* 关键：取消表格边框合并，才能让行间距生效 */
  border-spacing: 0; /* 去掉默认的单元格间距 */
}

/* 表头样式保留你的需求 */
.table thead {
  background-color: #FDDDD2;
}
.table thead th {
  width: 30%;
  text-align: center;
  padding: 10px; /* 给表头加内边距更美观 */
}
.table thead th:nth-child(2) {
  width: 40%; /* 第二列宽度单独设置 */
}

/* 核心：把每行改成盒子样式 */
.table tbody tr {
  display: block; /* 把tr从table-row改成block，这样margin才能生效 */
  background-color: #fff; /* 盒子背景色 */
  border: 1px solid #eee; /* 盒子边框 */
  border-radius: 8px; /* 圆角，让盒子更柔和 */
  padding: 15px; /* 盒子内边距，让内容不贴边 */
  margin-bottom: 12px; /* 行与行之间的间距 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 可选：加个轻微阴影，增强立体感 */
}

/* 单元格样式调整 */
.table tbody td {
  display: inline-block; /* 因为tr改成了block，td要改成inline-block保持横向排列 */
  vertical-align: middle; /* 垂直居中对齐 */
}
.table tbody td:nth-child(1) {
  width: 30%;
  text-align: center;
}
.table tbody td:nth-child(2) {
  width: 40%;
  text-align: justify;
}
.table tbody td:nth-child(3) {
  width: 30%;
  text-align: center;
}
</style>

<!-- HTML部分基本不变，去掉内联样式 -->
<table class="table">
<thead>
<tr>
<th>Appreciated To</th>
<th>Comment</th>
<th>Date Created</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="caserecord in empobj2">
<td>{{caserecord.app}}</td>
<td>{{caserecord.comment}}</td>
<td>{{caserecord.date}}</td>
</tr>
</tbody>
</table>

<script>
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"}];
</script>

关键样式说明 #

• border-collapse: separate：取消表格默认的边框合并，这是让行间距生效的前提。
• display: block 给tr：把表格行转换成块级元素，这样就能用margin-bottom来设置行与行之间的间距，同时可以添加边框、圆角等盒子样式。
• inline-block 给td：因为tr变成了块级元素，td需要改成inline-block才能保持横向排列，同时设置对应的宽度和对齐方式。
• 额外的阴影和圆角：可以让盒子看起来更精致，你可以根据需求调整颜色、圆角大小和间距数值。

内容的提问来源于stack exchange，提问作者Asad