Как я могу сделать размер <td>таким же, как его внутреннее содержимое в 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

Я не совсем уверен, почему это уже не будет правильно определять размеры. Однако, если вы хотите легко изменить ширину до статического значения, вы всегда можете установить его с помощью стиля 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;}

Надеюсь, это поможет

Answer 2

Если вам необходимо использовать таблицу, попробуйте задать ширину 100% для первого столбца. Это заставит другие столбцы сжаться до минимального размера в зависимости от содержимого.

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