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

这与您的精灵和您设置的背景位置值有关。我为你做了一个小提琴，看起来还可以。