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>

奖励点：从可访问性的角度来看，您的表结构现在更有意义。

您也可以使用标题元素，但其格式可能不足：

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

匹配网页上不同元素的宽度。 HTML IE7＆amp; IE8

2 个答案: