<div style="display: none">
<?xml version="1.0" ?><svg id="icon-user" height="24" version="1.1" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><g transform="translate(0 -1028.4)"><path d="m8.4062 1041.1c-2.8856 1.3-4.9781 4-5.3437 7.3 0 1.1 0.8329 2 1.9375 2h14c1.105 0 1.938-0.9 1.938-2-0.366-3.3-2.459-6-5.344-7.3-0.649 1.3-2.011 2.3-3.594 2.3s-2.9453-1-3.5938-2.3z" fill="#ffffff"/><path d="m17 4a5 5 0 1 1 -10 0 5 5 0 1 1 10 0z" fill="#ffffff" transform="translate(0 1031.4)"/><path d="m12 11c-1.277 0-2.4943 0.269-3.5938 0.75-2.8856 1.262-4.9781 3.997-5.3437 7.25 0 1.105 0.8329 2 1.9375 2h14c1.105 0 1.938-0.895 1.938-2-0.366-3.253-2.459-5.988-5.344-7.25-1.1-0.481-2.317-0.75-3.594-0.75z" fill="#ffffff" transform="translate(0 1028.4)"/></g></svg>
  <?xml version="1.0" ?><svg id="icon-user-opp" height="24" version="1.1" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><g transform="translate(0 -1028.4)"><path d="m8.4062 1041.1c-2.8856 1.3-4.9781 4-5.3437 7.3 0 1.1 0.8329 2 1.9375 2h14c1.105 0 1.938-0.9 1.938-2-0.366-3.3-2.459-6-5.344-7.3-0.649 1.3-2.011 2.3-3.594 2.3s-2.9453-1-3.5938-2.3z" fill="#0A2E36"/><path d="m17 4a5 5 0 1 1 -10 0 5 5 0 1 1 10 0z" fill="#0A2E36" transform="translate(0 1031.4)"/><path d="m12 11c-1.277 0-2.4943 0.269-3.5938 0.75-2.8856 1.262-4.9781 3.997-5.3437 7.25 0 1.105 0.8329 2 1.9375 2h14c1.105 0 1.938-0.895 1.938-2-0.366-3.253-2.459-5.988-5.344-7.25-1.1-0.481-2.317-0.75-3.594-0.75z" fill="#0A2E36" transform="translate(0 1028.4)"/></g></svg>
</div>

<table>
  <thead>
    
  </thead>
  <tbody>
    <tr>
      <td><svg viewBox="0 0 25 25"><use xlink:href="#icon-user"></svg></td>
      <td>Test User</td>
      <td class="add">13</td>
      <td>1232pts</td>
    </tr>
    <tr>
      <td><svg viewBox="0 0 25 25"><use xlink:href="#icon-user-opp"></td>
      <td>Test User</td>
      <td class="sub">1</td>
      <td>1021pts</td>
    </tr>
    <tr>
      <td><svg viewBox="0 0 25 25"><use xlink:href="#icon-user-opp"></td>
      <td>Test User</td>
      <td class="sub">1</td>
      <td>986pts</td>
    </tr>
    <tr>
      <td><svg viewBox="0 0 25 25"><use xlink:href="#icon-user-opp"></td>
      <td>Test User</td>
      <td class="sub">3</td>
      <td>874pts</td>
    </tr>
    <tr>
      <td><svg viewBox="0 0 25 25"><use xlink:href="#icon-user-opp"></td>
      <td>Test User</td>
      <td class="add">3</td>
      <td>653pts</td>
    </tr>
    <tr>
      <td><svg viewBox="0 0 25 25"><use xlink:href="#icon-user-opp"></td>
      <td>Test User</td>
      <td class="sub">3</td>
      <td>621pts</td>
    </tr>
    <tr>
      <td><svg viewBox="0 0 25 25"><use xlink:href="#icon-user-opp"></td>
      <td>Test User</td>
      <td class="sub">3</td>
      <td>421pts</td>
    </tr>
  </tbody>
</table>

html,
body {
  background: lightgrey;
  font-family: 'Hammersmith One', sans-serif;
}

table {
  margin: 2rem auto;
  width: 40rem;
  border-radius: .3rem;
  overflow: hidden;
  
  tr {
    background: #fff;
    border-bottom: 3px solid lightgrey;
    
    &:hover {
      background: #27FB6B;
    }
    
    &:first-of-type {
      background: #0A2E36;
      color: #fff;
      
      td {
        padding: 2.5rem 1rem;
      }
    }
    
    td {
      padding: 1.5rem 1rem;
      vertical-align: middle;
      text-align: center;
      
      &.add::before {
        content: '\25b2';
        padding-right: .5rem;
        color: #09A129;
      }
      
      &.sub::before {
        content: '\25bc';
        padding-right: .5rem;
        color: #E3170A;
      }
    }
  }
}