Bar Chart Table

by jonsan32

HTML

<center>
<table class="donation">
        <tr>
            <td class="bookends">2016 Goal</td>
            <td class="percent" colspan="4">58%</td>
            <td class="bookends">$12,000</td>
        </tr>
        <tr>
            <td></td>
            <td>Venues</td>
            <td>Players</td>
            <td>Staff</td>
            <td>Equipment</td>
            <td></td>
        </tr>
</table>
</center>

CSS

table.donation {
    table-layout: fixed;
    width: 100%;
    border: 0px solid #fff;
    border-collapse: collapse;
}


.donation td{
    border: 0px solid #fff;
    border-collapse: collapse;
    padding: 1px;
    font-size:10px;
    text-align:center;
    font-family:arial;
    letter-spacing:3px;
    text-transform:uppercase;
}
td.bookends{
  background:#fff;
  width:70px;
  letter-spacing:1px;
}
td.percent {
    text-align: center;
    color:#bbbbbb;
    border:2px black solid;
    background-color: #fff;
    background-image: linear-gradient(to right, #009900, #006600);
    background-size: 1% 100%;
    background-repeat: no-repeat;
}

JavaScript

$("td.percent").each(function() {
    var s = $(this).text() + ' 100%';
    $(this).css({"background-size": s});
});