TDK

by lukerichison

HTML

<table data-week="1">
    <tr class="info"><td colspan="3">Sunday, September 7 - 1:00pm</td></tr>
    <tr data-game="1">
        <td data-team="NYG"></td>
        <td class="spread">6</td>
        <td data-team="CAR"></td>
    </tr>
    <tr data-game="2">
        <td data-team="JAX"></td>
        <td class="spread">-3</td>
        <td data-team="IND"></td>
    </tr>
</table>

CSS

</style>
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<style>
@import url(http://fonts.googleapis.com/css?family=Orbitron:900,500);
body {margin: 1em;}
body {font-family: 'Orbitron', sans-serif;}
[data-week] {width: 100%;}
[data-week] tr {border: 1px solid #777; background-color:#F2F2EB;}
[data-week] tr.info {font-size:0.75em; text-align:center; line-height:1.75em; background-color:#C0C0C0;}
.spread {text-align:center; position:relative;}
[data-team] {width: 5.5em; line-height:1.75em; background-color:#FFF;}
[data-team] input {display:none;}
[data-team] label {display:block; cursor:pointer; width:100%; -webkit-box-sizing: border-box; font-weight:bold;-webkit-transition: all 200ms ease-in;-moz-transition: all 200ms ease-in;-ms-transition: all 200ms ease-in;-o-transition: all 200ms ease-in;transition: all 200ms ease-in;}
[data-team]:first-child label {border-left: 0.5em solid rgba(42,186,201,0.1); padding-left: 0.5em;}
[data-team]:last-child  label {border-right:0.5em solid rgba(203,235,47,0.2); padding-right:0.5em; text-align:right;}
[data-team]:first-child label:hover {text-shadow:0.0625em 0.0625em 0.125em rgba(42,186,201,1);}
[data-team]:last-child  label:hover {text-shadow:0.0625em 0.0625em 0.125em rgba(203,235,47,1);}
[data-team]:first-child input:checked + label {border-left-color: rgba(42,186,201,1);}
[data-team]:last-child  input:checked + label {border-right-color:rgba(203,235,47,1);}
 tr:nth-child(3) {
     background: -webkit-gradient(linear, left top, right top, color-stop(46%,rgba(42,186,201,1)), color-stop(47%,rgba(203,235,47,1)));
    background: linear-gradient(to right,  rgba(42,186,201,1) 46%,rgba(203,235,47,1) 47%);
}
tr:nth-child(3) .spread:before, tr:nth-child(3) .spread:after {position:absolute; bottom:0.5em; font-size:0.5em;}
tr:nth-child(3) .spread:before {content:"46%"; left: 0.5em;}
tr:nth-child(3) .spread:after  {content:"53%"; right:0.5em;}

JavaScript

$("[data-week]").each(function () { var week = $(this).data("week");
    $("[data-game]", this).each(function () { var game = $(this).data("game");
        $("[data-team]", this).each(function () { var team = $(this).data("team");
              $(this).html(
                  "<input type='radio' name='"+week+"."+game+"' value='"+team+"' id='"+team+"."+week+"."+game+"'>"+
                  "<label for='"+team+"."+week+"."+game+"'>"+team+"</label>"
              );
        });
    });
});