CSS表格td宽度和右对齐不起作用

Question

这是我在FireFox中的表格。请注意，带有用户名的中间列是宽的，编辑链接是右对齐的。

这是IE7和IE8：

这是html：

    <fieldset >
    <legend>Account Information</legend>
    <table class="display-table">
        <tr>
            <td class="display-label">
                <label for="UserName">Username</label>
            </td>
            <td class="display-field-middle">
                user7
            </td>
            <td class="display-field-right">
                <a class="" href="/test1/Account/ChangeUserName">edit</a>


            </td>
        </tr>
        <tr>
            <td class="display-label">
                <label for="Password">Password</label>
            </td>
            <td class="display-field-middle">
                *********
            </td>
            <td class="display-field-right">
                <a class="" href="/test1/Account/ChangePassword">edit</a>
            </td>
        </tr>
    </table>
    </fieldset>

这是继承样式的FireBug显示：

这是样式表：

.display-table
{
    border-collapse:collapse;
    width: 400px;
}

.display-label
{   
    white-space: nowrap;
    vertical-align:middle;
    width: 120px;
}

.display-field-middle
{
    width: 200px;
    background-color: #dfeffc;
    vertical-align:middle;
    height: 30px;
    padding-left: 5px;
    padding-right: 5px;
}


.display-field-right
{
    width: 50px;
    background-color: #dfeffc;
    vertical-align:middle;
    height: 30px;
    padding-left: 5px;
    padding-right: 5px;
    text-align: right;
}

为什么中间列不会扩展，为什么编辑链接没有正确对齐？ 我已经尝试了一切！

Answer 1

事实证明我测试不正确，页面一直在运行。 ：（