CSS 如何将表格宽度限制在包含元素（或屏幕）范围内

在本文中，我们将介绍如何使用CSS来限制表格的宽度，使其适应包含元素或屏幕的大小。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

使用max-width属性

要将表格的宽度限制在包含元素或屏幕的范围内，可以使用CSS的max-width属性。max-width属性指定元素的最大宽度，如果表格的实际宽度超过这个值，它将被自动调整为最大宽度。

下面是一个示例代码：

<div style="max-width: 500px;">
  <table style="width: 100%;">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
    <tr>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
  </table>
</div>

在上面的示例中，使用max-width属性将包含表格的

div>元素的最大宽度限制为500像素。表格的宽度设置为100%确保它充满其包含元素的宽度。如果实际内容的宽度超过了最大宽度，表格会自动适应并显示水平滚动条。

使用百分比设置表格宽度

另一种将表格的宽度限制为包含元素或屏幕宽度的方法是使用百分比。可以将表格的宽度设置为百分比值，以便根据其包含元素的宽度进行调整。

下面是一个使用百分比设置表格宽度的示例代码：

<div style="width: 80%;">
  <table style="width: 100%;">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
    <tr>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
  </table>
</div>

在上面的示例中，将包含表格的

div>元素的宽度设置为80%。然后，通过将表格的宽度设置为100%，使其充满其包含元素的宽度。这样，表格的宽度将根据其包含元素的宽度进行调整，保持相对比例。

使用媒体查询

除了使用max-width和百分比来限制表格的宽度，还可以使用媒体查询来根据不同的屏幕宽度应用不同的样式。通过这种方式，可以根据屏幕尺寸调整表格的展示方式，以适应不同终端设备的显示效果。

下面是一个示例代码：

<style>
  @media (max-width: 600px) {
    table {
      width: 100%;
    }
  }

  @media (min-width: 601px) {
    table {
      width: 80%;
    }
  }
</style>

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

在上面的示例中，定义了两个媒体查询。当屏幕宽度小于或等于600像素时，将表格的宽度设置为100%。当屏幕宽度大于600像素时，将表格的宽度设置为80%。这样，可以根据不同的屏幕尺寸应用不同的表格宽度。