如何使 <td> 的大小与其在 IE 中的内部内容相同？答案

【问题标题】：How can I make the size of a <td> be the same as its inner contents in IE?如何使 <td> 的大小与其在 IE 中的内部内容相同？
【发布时间】：2011-07-14 22:53:29
【问题描述】：

如何使<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 的解决方案将不胜感激。

【问题讨论】：

表格可能不是最好的工具。 chromaticsites.com/blog/…
我在 IE7 和 IE8 中都尝试了您的代码，但没有看到您描述的问题。在两种浏览器（以及 FF）中，TD 的大小是相同的。也许您有应该向我们展示的 CSS？或者它是不同版本的IE？或者我没有正确理解您的问题？
默认情况下，表格单元格本身的大小与其内容的大小相同。您在哪个版本的 IE 上遇到问题，具体是什么问题？
就像@Lea，我觉得很好：jsfiddle.net/pauldwaite/EADrK

标签： html css html-table

【解决方案1】：

我不完全确定为什么这不会正确调整自己的大小。但是，如果您想轻松地将宽度修改为静态值，您始终可以在代码中使用 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;}

希望有帮助

【讨论】：

【解决方案2】：

如果您必须使用表格，请尝试将第一列的宽度设为 100%。这将强制其他列根据内容缩小到最小尺寸。

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

【讨论】：