CSS table td width and right align not working [closed]
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this questionThis is my table in FireFox. Note that the center column, with the user name, is wide and the edit link is right aligned.
This is IE7 and IE8:
Here’s is the html:
<fieldset >
<legend>Account In开发者_JS百科formation</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>
This is the FireBug display of the inherited styles:
Here is the style sheet:
.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;
}
Why isn’t the middle column expanding and why aren’t the edit links right aligned? I’ve tried everything!
It turns out that I was testing incorrectly and the page was working all along. :(
精彩评论