拆分表行（间距）

Question

I am trying to implement a table in bootstrap. The goal is to use a dark color as the background and a lighter color as the background of the table rows. Is it possible to divide the table rows, giving a space between them?

The content will be populated using * ngFor,

What I want

My code

Codeply

<table class="table table-borderless">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Answer 1

There are many ways to create space. I provide some to give you a direction.

One is directly add border-bottom to your <tr>

 tr { border-bottom: 10px solid grey; }

Another one is uniformly create border space for your table, but you have to set background and foreground color. It slightly different to what you want but you might want to try it out.

 table { border-collapse: separate; border-spacing: 0 10px; background-color:grey; } tr { background-color:white;}