How can I make the size of a <td> be the same as its inner contents in IE?

Question

How can I make width & height of a <td> the same as that of its inner contents?

<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>

In above example I would like to have size of td the same as that of buttons inside it, but in IE it is taking some extra space. Solutions without JavaScript will be appreciated.

Answer 1

If you must use a table, try giving the first column a width of 100% This will force the other columns to shrink to their minimum size based on content.

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

Answer 2

I'm not entirely sure why this wouldn't be sizing itself properly already. However if you want to easily modify the width to a static value you can always set it with a CSS style in the code.

ex. <td style="width: 600px;">

If you want the content to automatically resize the table the columns should format to the same size.

Or you could make this out of divs which might be easier to work with as well. Something along these lines perhaps:

<div id="logout">

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

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

</form>

</div>

Then you can use an external or internal CSS page to easily format the divs.

#logout{width: 400px;}

Hope that helps