Rows in HTML CSS

Question

Can someone help achieve this type of rows in HTML with CSS?

This is how it looks now:

Achieved with this code:

table {
  margin: auto;
  font-size: 1em;
  font-weight: bold;
  width: 95%;
  color: green;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.219);
  border-collapse: separate;
  border-spacing: 30px 30px;
}
tr {
    background-color: white;
  border-collapse: none;
  cursor: pointer;
}
td {
  width: 250px;
  text-align: center;
  border: 0px solid black;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.295);
  border-radius: 20px;
  padding: 20px;
  font-size: 18px;
}

    <table id="usertab" class="table" >
      <tr>   
         <td class="rank"># 1</td>  
        <td> Name</td>
        <td>Canada</td>    
      </tr>
      <tr>
        <td class="rank"># 2</td>  
        <td> Name</td>
        <td>Canada</td> 
      </tr>
      <tr>
        <td class="rank"># 3</td>  
        <td> Name</td>
        <td>Canada</td>    
      </tr>
      <tr>
        <td class="rank"># 4</td>  
        <td> Name</td>
        <td>Canada</td>
      </tr>
      <tr>
        <td class="rank"># 5</td>  
        <td> Name</td>
        <td>Canada</td>  
      </tr>
      <tr>
        <td class="rank"># 6</td>  
        <td> Lucia Burgess</td>
        <td>Canada</td>
      </tr>
      
    </table>

And this is how I want it to look like:

When I try to change border spacing it looks bad. The goal is to make it look like single row but with space between rows.

Answer 1

You should move the box-shadow and the border-radius to the tr.
Remove also border-collapse:none; on the tr.

table {
  margin: auto;
  font-size: 1em;
  font-weight:bold;
  width: 95%;
  color: green;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.219);
  border-collapse: separate;
  border-spacing: 30px 30px;
}
tr {
  cursor: pointer;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.295);
  border-radius: 20px;
}
td {
  width: 250px;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

<table id="usertab" class="table" >
      <tr>   
         <td class="rank"># 1</td>  
        <td> Name</td>
        <td>Canada</td>    
      </tr>
      <tr>
        <td class="rank"># 2</td>  
        <td> Name</td>
        <td>Canada</td> 
      </tr>
      <tr>
        <td class="rank"># 3</td>  
        <td> Name</td>
        <td>Canada</td>    
      </tr>
      <tr>
        <td class="rank"># 4</td>  
        <td> Name</td>
        <td>Canada</td>
      </tr>
      <tr>
        <td class="rank"># 5</td>  
        <td> Name</td>
        <td>Canada</td>  
      </tr>
      <tr>
        <td class="rank"># 6</td>  
        <td> Lucia Burgess</td>
        <td>Canada</td>
      </tr>
      
    </table>