我该如何制作一个大小 be the same as its inner contents in IE?

Question

如何使<td>的宽度和高度与其内部内容相同？

<table cellspacing=0 cellpadding=0>
<TBODY>
<TR>
<TD></TD>
<TD id=loginButton><BUTTON class=btn><SPAN>Login</SPAN></BUTTON></TD>
<TD id=changePasswordButton><BUTTON class=btn><SPAN>Change Password</SPAN></BUTTON></TD>
<TD id=forgotPasswordButton><BUTTON class=btn><SPAN>Forgot Password</SPAN></BUTTON></TD></TR>
</TBODY>
</table>

在上面的示例中，我希望td的大小与其中的按钮大小相同，但在IE中它需要一些额外的空间。没有JavaScript的解决方案将不胜感激。

Answer 1

如果必须使用表格，请尝试为第一列提供100％的宽度。这将强制其他列根据内容缩小到最小大小。

http://jsfiddle.net/Jaybles/wq3Yz/

Answer 2

我不完全确定为什么这不会适当地调整自己的大小。但是，如果要将宽度轻松修改为静态值，则始终可以在代码中使用CSS样式进行设置。

恩。 <td style="width: 600px;">

如果您希望内容自动调整表的大小，则列应格式化为相同的大小。

或者你可以用div来制作它，这也可能更容易使用。沿着这些方向的东西也许：

<div id="logout">

<form method='post' action='logOut.php'>

<input type='submit' value='Logout' name='logout' />

</form>

</div>

然后，您可以使用外部或内部CSS页面轻松格式化div。

#logout{width: 400px;}

希望有所帮助