如何使用 CSS 在两个 TR 或表格行之间添加空间？
我有一张表，在该表中有多行。
+--------+----------------------------------+
| COL 1 | COL 2 |
| | |
| | |
| | |
+--------+----------------------------------+
| Transparent Space |
+--------+----------------------------------+
| COL 1 | COL 2 |
| | |
+--------+----------------------------------+
| Transparent Space |
+--------+----------------------------------+
在我的表中，COL1 内容的高度可变，但 COL2 内容的高度固定。
我已经创建了 JSFiddle:
https://jsfiddle.net/w5aLf2vc/
在上面的 JSFiddle 中，我需要为每一行显示 30px 的底部间距，并且该间距应该是透明的或者应该是灰色的背景。此外，我正在使用 ng-repeat 和 $scope 数组创建此表。
最佳答案
希望对您有所帮助:
<body>
<div style="background:gray;">
<table style="border:0;">
<tr>
<td class="my-td-left">TD1 TD1 TD1 TD1 TD1 TD1 TD1 TD1 TD1 TD1 TD1 TD1 TD1 TD1 TD1 TD1 TD1 TD1 TD1 TD1 TD1 TD1 TD1 TD1 TD1 TD1 TD1 TD1 TD1 TD1 TD1 TD1
</td>
<td class="my-td-right">TD1 TD1 TD1 TD1 TD1 TD1
</td>
</tr>
<!-- Style 1: Background changed -->
<tr style="height: 10px;">
<td colspan="2" style="background-color: #fff;"></td>
</tr>
<tr>
<td class="my-td-left">TD2 TD2 TD2 TD2 TD2 TD2 TD2 TD2 TD2 TD2 TD2 TD2 TD2 TD2 TD2 TD2
</td>
<td class="my-td-right">TD2 TD2 TD2 </td>
</tr>
<!-- Style 2: No background change -->
<tr style="height: 10px;"></tr>
<tr>
<td class="my-td-left">TD3 TD3 TD3</td>
<td class="my-td-right">TD3 TD3 TD3</td>
</tr>
</table>
</div>
</body>
更新 fiddle :https://jsfiddle.net/w5aLf2vc/4/
关于html - 如何在两个 tr 或行之间添加空格 - CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40218639/