Match width of different elements on web page. HTML IE7 & IE8

Question

Hi all,

In the following code I need to match the width when shrinking the window :

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

This is just a little example of the page, it would involve more divs and tables.

When I shrink the window the table and the div shrink as need it so the div will shrink more than the table, and that make the page look ugly.

Is there any way to stop the div shrinking when table can't shrink any more?

I tried min-with and it does not work, and I asked already for anything similar but apparently there isn't anything apart of JavaScript.

Could any of you give me a solution other than JavaScript?

Thanks in advance.

Cesar.

Answer 1

You can use thead and colspan to display the title inside the table:

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

Bonus point : your table structure now makes more sense from an accessibility point of view.

You can also use the caption element, but its formatting may be inadequate :

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

Answer 2

I do not have IE7+ to test this, but in Opera it works when you put all the HTML in an outer div block. Than the outer div block is the same with as the table. So at a certain point it does not fit the browser window any more, but now the outer block has its width and in title div keeps the same width as the outer block.

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