Question

考虑此HTML文件：

<!DOCTYPE html>
<html>
<head>
  <title>Two tables before</title>
  <meta charset="utf-8">
  <style>

    table
    {
      font-family: monospace;
      font-size: 15pt;
      border: 1px solid #000;
      border-collapse: collapse;
      margin-top: none;
      margin-bottom: none;
    }

    td, th { border-left: 1px solid #000; }
    #bottom-table { caption-side: bottom; }

  </style>
</head>

<body>

<table>
  <caption>Before: top table caption</caption>
  <tbody>
    <tr>
      <td>This is a row in the top table which should be about this long</td>
    </tr>
  </tbody>
</table>

<table id="bottom-table">
  <caption>Before: bottom table caption</caption>
  <tbody>
    <tr>
      <td>This is a row in the bottom table</td>
      <td>widen this</td>
    </tr>
  </tbody>
</table>

</body>
</html>

此文件在Chrome中呈现如下：

请注意，两个表是相邻的，没有空格将它们分开。这个是想要的。另请注意，表格的宽度不同。这个不需要。相反，希望第二个td in的宽度扩展底部表格行，使底部表格宽度变为与顶桌宽度相同。像这样：

上面的图像有点偏离。想要的表是完全一样的宽度。当然，理想情况下，HTML / CSS可以实现这一目标不需要绝对宽度，以便改变第一张桌子会自动导致第二张桌子的宽度改变。另外，我更喜欢仅使用HTML和CSS而不使用JavaScript的解决方案。

Answer 1

如果您希望两个表的宽度都必须相等，请将它们的宽度都设置为width="100%"，然后确保它们填充相同的父div。然后，它们应该始终与父页面一样宽，您可以使页面相对且流畅。

希望一个HTML表格的宽度与另一个相同

1 个答案: