关于table的width:100%和margin导致溢出

关于table的width:100%和margin导致溢出的问题通常是因为没有正确理解table默认的box-sizing属性造成的，下面是完整攻略。

了解table的默认box-sizing属性

table 是一个特殊的 HTML 标签，它默认的 box-sizing 属性是 border-box，而非一般的 content-box，这意味着 table 的 width 和 height 包括 border 和 padding。

因此，我们在设置 table 元素的宽度时可以使用 width: 100% 来实现，这样 table 的宽度会自适应其容器的大小。

margin导致溢出

当我们给 table 元素添加 margin 时，若其宽度超过了容器的宽度，则会导致溢出，我们可以通过以下两个示例来说明。

示例一

HTML 代码：

<div class="container">
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </table>
</div>

CSS 代码：

.container {
  width: 100%;
  margin: 0 20px;
}

table {
  width: 100%;
  margin: 0 20px;
}

在上述代码中，我们将容器的宽度设置为 100%，并给 container 和 table 添加了相同的 margin 值。这时，若容器的宽度为 1000px，每个 td 的宽度为 300px，那么 table 的宽度就为 900px，在添加了左右 margin 值后就会变成 940px，导致溢出。解决方法如下。

table {
  width: calc(100% - 40px);
  margin-left: 20px;
  margin-right: 20px;
}

我们使用 calc 函数来计算 table 的宽度，应该减去左右 margin 值的宽度。

示例二

HTML 代码：

<div class="container">
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </table>
</div>

CSS 代码：

.container {
  width: 100%;
  margin: 0 20px;
  border: 10px solid #000;
}

table {
  width: 100%;
  margin: 0 20px;
}

在上述代码中，我们在容器上添加了 10px 的 border，这时，若容器的宽度为 1000px，每个 td 的宽度为 300px，那么 table 的宽度就为 900px，在添加了左右 margin 值后就会变成 940px，再加上 20px 的 border，导致溢出。解决方法如下。

table {
  width: calc(100% - 60px);
  margin-left: 20px;
  margin-right: 20px;
}

我们使用 calc 函数来计算 table 的宽度，应该减去左右 margin 值和容器的 border 值的宽度。