html - 如何让 CSS 表格列对齐？

Question

我正在处理一个 CSS 表格，结果出乎意料 - 表格列没有正确排列。这是表格的样子

这是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;
}

这是表格 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>

如能协助解决此问题，我们将不胜感激。谢谢。

Answer 1

这与您的 Sprite 和您设置的背景位置值有关。我做了一个fiddle对你来说似乎没问题。