How do I get CSS table columns to line up?

Question

I am working with a CSS table, and having an unexpected result - the table columns do not line up properly. This is what the table looks like

Here is the CSS

* {
    /* old-style reset here :) */
    border: 0px;
    padding: 0px;
}

table {
    border-collapse: separate;
    border: 1px solid #9DABCE;
    border-width: 0px 0px 1px 1px;
    margin: 10px auto;
    font-size: 20px;
    width:90%;
}
td, th {
    width: 41px;
    height: 41px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    vertical-align: middle;
    background: url(../img/cells.png);
    color: #444;
    position: relative;
}
th {
    font-weight: bold;
    font-size: 14px;
}
td.today {
    background-position: 81px 0px;
    color: white;
}

And here is the table HTML

 <table cellspacing="0">
            <thead>
                    <th>Core Measure</th><th>National Average</th>
            </thead>
            <tbody>
                <tr>
                    <td class="today">Discharge Instructions</td>
                    <td class="today">91%</td>
                </tr>
                <tr>
                    <td class="today">Measure LV Systolic Function</td>
                    <td class="today">98%</td>
                </tr>
                <tr>
                    <td class="today">ACE/ARB for LVSD</td>
                    <td class="today">95%</td>
                </tr>
                <tr>
                    <td class="today">Smoking Cessation</td>
                    <td class="today">99%</td>
                </tr>
            </tbody>
            <tfoot>
                    <th>Core Measure</th><th>National Average</th>
            </tfoot>
        </table>

Assistance fixing this problem would be greatly appreciated. Thank you.

Answer 1

It is something to do with your sprite and the background-position values you set. I made a fiddle for you and it seems okay.