<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;
}
}
}
}
This Pen doesn't use any external JavaScript resources.