JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <table>
        <thead>
            <th>Rank</th>
            <th>Player</th>
            <th>Pts</th>
        </thead>
        <tbody>
            <tr id="first">
                <td>1</td>
                <td>player1</td>
                <td>50</td>
            </tr>
            <tr>
                <td>2</td>
                <td>player2</td>
                <td>40</td>
            </tr>
            <tr>
                <td>3</td>
                <td>player3</td>
                <td>30</td>
            </tr>
            <tr>
                <td>4</td>
                <td>player4</td>
                <td>40</td>
            </tr>
        </tbody>
    </table>
</div>

SCSS

table {
   padding: 56px;
   border-collapse:separate; 
   border-spacing:0 1px;
   position:relative;
}
thead {
  background: lime;
  tr:after {
      background: lime;
    content: "";
    height: 2px;
    position: absolute;
    left: 56px;
    top: 77px;
    width: calc(100% - 111px);
  }
}
tbody {
    color: #fff;
    td {
        background: lime;
        padding: 20px;
    }
    tr:last-child td {
            border:0;
        }       
}

.wrapper {
    background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQuMnwQjDzZM_NyCdJ3HEYKFCc9RWd6Q4vKS8tRwVbT67Fwvchv);
    background-size:cover;
}

JavaScript

https: //jsfiddle.net/qapmqfau/3/#tidy