Как сделать так, чтобы ширина столбца соответствовала его содержимому в таблице HTML?

Question

У меня есть следующая таблица в моем HTML:

<div style="max-width:700px;">
    <table border="1">
        <tr><td colSpan="2">this is a loooooooooooooooong text</td></tr>
        <tr><td width="1px">a:</td><td >b</td></tr>
        <tr><td width="1px">c:</td><td >d</td></tr>
    </table>
<div>

Я хочу, чтобы ширина первого столбца во второй и третьей строке просто соответствовала длине содержимого (поэтому я поместил туда width="1px"),А пока я хочу, чтобы ширина таблицы соответствовала длине самого длинного содержимого в таблице (которая является первой строкой), а не охватывала максимальную ширину ограничивающего его div.

Это работаетв Firefox, как показано ниже.

Однако в IE 9 он не работает должным образом, как показано.

Я пытался заменить width="1px" на width="1%".Но тогда ширина таблицы будет равна максимальной ширине родительского div.

Кто-нибудь знает, как это исправить в IE?

Answer 1

Я только что протестировал в своем IE9, и установка ширины в 1px работает.Но он отображается так, как вы представили выше в режиме совместимости .Вы объявили свой тип документа и все другие забавные вещи?

Это может быть потому, что вы используете старые методы для отображения таблицы.Вы можете попробовать стилизовать таблицу с границами и так далее в CSS - например:

table, td, tr, th{
  border:1px solid #f0f;
}

.onepx{
  width:1px;
}



<div style="max-width:700px;">
  <table>
    <tr><td colspan="2">this is a loooooooooooooooong text</td></tr>
    <tr><td class="onepx">a:</td><td>b</td></tr>
    <tr><td class="onepx">c:</td><td>d</td></tr>
  </table>
<div>

и так далее - я уверен, что вы поняли идею.это может остановить автоматическое отображение в представлении совместимости (если это проблема).

И, наконец, поскольку IE9 настолько глуп, вам придется отключить представление совместимости (если оно включено на странице), потому что все страницы в домене будут просматриваться в режиме совместимости.

Answer 2

Вы упомянули, что вы пытались установить его на 1%, вы установили другой на 99%?

<tr><td width="1%">a:</td><td width="99%">b</td></tr>
<tr><td width="1%">c:</td><td width="99%">d</td></tr>