Блог

Главная - Вопросы по программированию - Как я могу сделать размер таким же, как его внутреннее содержимое в IE?

Как я могу сделать размер таким же, как его внутреннее содержимое в IE?

#html #css #html-table

#HTML #css #html-таблица

Вопрос:

Как я могу сделать ширину и высоту a <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.

Комментарии:

1. Таблицы могут быть не лучшим инструментом для этого. chromaticsites.com/blog /…

2. Я пробовал ваш код как в IE7, так и в IE8, и я не увидел проблемы, которую вы описываете. В обоих браузерах (а также в FF) размеры TD одинаковы. Может быть, у вас есть CSS, который вы должны нам показать? Или это другая версия IE? Или, может быть, я неправильно понял вашу проблему?

3. По умолчанию ячейки таблицы сами по себе имеют тот же размер, что и их содержимое. С какой версией IE у вас возникли проблемы и в чем именно проблема?

4. Как и @Lea, для меня это выглядит нормально: jsfiddle.net/pauldwaite/EADrK

Ответ №1:

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

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

Ответ №2:

Я не совсем уверен, почему это уже не будет правильно определять размер. Однако, если вы хотите легко изменить ширину до статического значения, вы всегда можете задать его с помощью стиля CSS в коде.

пример. <td style="width: 600px;">

Если вы хотите, чтобы содержимое автоматически изменяло размер таблицы, столбцы должны быть отформатированы до того же размера.

Или вы могли бы сделать это из divs, с которыми также было бы проще работать. Возможно, что-то в этом роде:

<div id="logout">

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

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

</form>

</div>

Затем вы можете использовать внешнюю или внутреннюю страницу CSS для простого форматирования divs.

 #logout{width: 400px;}

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