匹配网页上不同元素的宽度。 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>