JSFiddle - React, Tailwind, and code Playground

by truetone

HTML

<section class="group summer">
    <article class="weeklyStandings">
         <h2>Week 1</h2>

        <table>
            <tr>
                <th>Player</th>
                <th>Won</th>
                <th>Played</th>
                <th>Winning %</th>
            </tr>
            <tr class="record">
                <td>Player 1</td>
                <td>8</td>
                <td>12</td>
                <td></td>
            </tr>
            <tr class="record">
                <td>Player 2</td>
                <td>8</td>
                <td>12</td>
                <td></td>
            </tr>
            <tr class="record">
                <td>Player 3</td>
                <td>7</td>
                <td>12</td>
                <td></td>
            </tr>
            <tr class="record">
                <td>Player 4</td>
                <td>6</td>
                <td>12</td>
                <td></td>
            </tr>
            <tr class="record">
                <td>Player 5</td>
                <td>6</td>
                <td>12</td>
                <td></td>
            </tr>
            <tr class="record">
                <td>Player 6</td>
                <td>6</td>
                <td>12</td>
                <td></td>
            </tr>
            <tr class="record">
                <td>Player 7</td>
                <td>6</td>
                <td>12</td>
                <td></td>
            </tr>
        </table>
    </article>
</section>

CSS

body { 
    font-size: 13px; 
    font-family: "Lucida Grande","Lucida Sans Unicode", Arial, Verdana, sans-serif; 
    line-height: 20px; 
}
a {
    text-decoration: none;
}
a:hover {
    font-color: red;
}
h2 {
    padding: 5px;
    font-size: 16px;
    text-align: center;
    background-color: #bbb;
    color: #fff;
}
.player h2 {
    font-weight: bold;
    padding: 5px 0;
}
.group:after {
    content:"";
    display: table;
    clear: both;
}
.hidden {
    display: none;
}
.fleft {
    float: left;
}
.fright {
    float: right;
}
table {
    width: 300px;
}
article {
    float: left;
    margin-right: 22px;
}
article:nth-of-type(3) {
    margin-right: 0;
}
table th {
    font-weight: bold;
    text-align: center;
}
table th:nth-child(1) {
    text-align: left;
}
table th, table td {
    padding: 5px 5px;
}
table td:nth-child(2), table td:nth-child(3), table td:nth-child(4) {
    text-align: center;
}
table tr:nth-child(2n -1) {
    background: #fff;
}
table tr:nth-child(2n) {
    background: #eee;
}
tr.sub, table tr:nth-child(2n -1).sub {
    background: #666;
    color: #fff;
}
table tr.winner {
    background-color: #a3eeb3;
}

JavaScript

$(document).ready(function(){
    $('tr.record').each(function(){
        var cells = $(this).children('td');
        var gamesWon = parseInt(cells[1].innerText);
        var gamesPlayed = parseInt(cells[2].innerText);
        var winningPercentage = (gamesWon / gamesPlayed * 100).toFixed(1) + "%";
        $(cells[3]).html(winningPercentage);
    });
    $('article.weeklyStandings').each(function(){
       var numPlayers = $(this).find('.record').length;
       $(this).children('h2').append(" - " + numPlayers + " Players");
    });
    $('article.weeklyStandings').each(function(){
        var winningPercentage = $('tr.record:nth-of-type(2)',this).find('td:nth-of-type(4)');
        $('tr.record',this).each(function(){
            var percentageWon = $(this).find('td:nth-of-type(4)');
            if (percentageWon == winningPercentage) {
                $('td:nth-of-type(1)', this).html("winner");
            }
        });
    });
});