Соответствуйте ширине различных элементов на веб-странице. HTML IE7 и IE8

Question

В следующем коде мне нужно соответствовать ширине при сжатии окна:

<div style="background-color:blue;">The title</div>
<table>
  <tr>
    <td> Column title </td>
    <td>Content</td>
    <td>Column title2</td>
    <td>Content 2</td>
  </tr>
</table>

Это всего лишь небольшой пример страницы, он будет включать в себя больше div и таблиц.

Когда я сужаю окно, таблица и div сжимаются по мере необходимости, так что div сжимается больше, чем таблица, и это делает страницу уродливой.

Есть ли способ остановить сокращение div, когда таблица больше не может уменьшаться?

Я пробовал min-with, и он не работает, и я уже просил что-нибудь подобное, но, очевидно, нет ничего, кроме JavaScript.

Может ли кто-нибудь из вас дать мне решение, отличное от JavaScript?

Заранее спасибо.

Сезар.

Answer 1

У меня нет IE7 + для проверки этого, но в Opera это работает, когда вы помещаете весь HTML во внешний блок div. Чем внешний блок div совпадает с таблицей. Так что в определенный момент он больше не помещается в окне браузера, но теперь внешний блок имеет свою ширину и в заголовке div сохраняет ту же ширину, что и внешний блок.

<div style="background-color:red;">
  <div style="background-color:blue;">The title</div>
  <table>
    <tr>
      <td> Column title </td>
      <td>Content</td>
      <td>Column title2</td>
      <td>Content 2</td>
    </tr>
  </table>
</div>

Answer 2

Вы можете использовать thead и colspan для отображения заголовка в таблице:

<table>
<thead><tr style="background-color:blue;"><th colspan="4">The title</th></tr></thead>
<tbody>
  <tr>
    <td> Column title </td>
    <td>Content</td>
    <td>Column title2</td>
    <td>Content 2</td>
  </tr>
</tbody>
</table>

Бонус: ваша структура таблицы теперь имеет больше смысла с точки зрения доступности.

Вы также можете использовать элемент caption , но его форматирование может быть недостаточным:

<table>
<caption style="background-color:blue;">The title</caption>
  <tr>
    <td> Column title </td>
    <td>Content</td>
    <td>Column title2</td>
    <td>Content 2</td>
  </tr>
</table>