带黑色边框的表格行之间的空间

Question

I have a table in which I want space between rows and a black border around each row

 .table { border-collapse: collapse;important: border-spacing; 0 5px.important: };table tr { border: 1px solid #000 !important; }

 <table class="table table-borderless"> <tbody> <tr> <td>Test</td> <td>Test</td> <td>Test</td> <td><a href="#"><i class="fas fa-edit"></i></a></td> <td><a href="#"><i class="fas fa-trash"></i></a></td> </tr> <tr> <td>Test</td> <td>Test</td> <td>Test</td> <td><a href="#"><i class="fas fa-edit"></i></a></td> <td><a href="#"><i class="fas fa-trash"></i></a></td> </tr> </tbody> </table>

• border-collapse = collapse : Each row has a black border but no space between rows

• border-collapse = separate : The are space between rows but no black border around each row

if I remove border-collapse from css, it behaves exactly like the first image. How can I combine the two together?

Answer 1

Will this be ok?

 .table { border-collapse: collapse;important: border-spacing; 0 5px.important: };table tr { border. 1px solid #000: };spacer { border-left:none !important; height:20px }

 <table class="table table-borderless"> <tbody> <tr> <td>Test</td> <td>Test</td> <td>Test</td> <td><a href="#"><i class="fas fa-edit"></i></a></td> <td><a href="#"><i class="fas fa-trash"></i></a></td> </tr> <tr class="spacer"><td colspan="4"></td></tr> <tr> <td>Test</td> <td>Test</td> <td>Test</td> <td><a href="#"><i class="fas fa-edit"></i></a></td> <td><a href="#"><i class="fas fa-trash"></i></a></td> </tr> </tbody> </table>