我正在使用表格,为了在行之间创建边距,我正在使用border-spacing
。现在,新要求是删除某些行之间的边距。
我试图找到一种在tr
之间添加边距而没有border-spacing
的方法,但是没有。我需要保证金,因为我使用的是背景色和悬停效果,因此行之间必须有一个空格。
// HTML--------------------------------------
<table>
<thead>
<tr>
<th>Lorem ipsum</th><th>Lorem ipsum</th><th>Lorem ipsum</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Data</td><td>Some Data</td><td>Some Data</td>
</tr>
<tr>
<td>Some Data</td><td>Some Data</td><td>Some Data</td>
</tr>
<tr>
<td>Some Data</td><td>Some Data</td><td>Some Data</td>
</tr>
</tbody>
</table>
// CSS--------------------------------------
table {
border-collapse: separate;
border-spacing: 0 4px;
tbody {
tr {
background-color: lightgrey;
td {
padding: 1.0rem;
}
}
}
}
我想在没有border-spacing
的情况下实现此结果,并且我也不能为每一行使用单独的tbody
。