浏览器拉伸时HTML表格超出最后一列扩展该如何解决

核心原因是HTML表格默认width: auto的特性会使其尽可能填充父容器（此处为body元素）的可用宽度，当窗口宽度大于表格内容本身的最小总宽度时，原有列会被等比例拉宽，并非生成了额外列。你可以选择以下任意一种方案解决：

• 方案1：让表格宽度刚好贴合内容总宽
  给table元素新增width: fit-content属性即可，修改后的CSS示例：

  table, th, td {
    border: 2px solid black;
    border-collapse: collapse;
    align-content: center;
    text-align: center;
  }
  /* 新增表格宽度规则 */
  table {
    width: fit-content;
    /* 如果需要表格在页面中居中，可以额外加一行 margin: 0 auto; */
  }
  th, td {
    padding: 10px;
  }
  

  该方案兼容性覆盖所有主流现代浏览器，表格宽度会刚好等于内容所需的最小宽度，不会被额外拉伸，窗口宽度小于内容总宽时仍会自适应缩小。

• 方案2：限制表格的最大宽度
  如果你需要表格可以适当拉伸，但不超过某个固定宽度，可以给table设置max-width属性：

  table {
    max-width: 500px; /* 可自定义为你需要的最大宽度值 */
    width: 100%;
  }
  

  该方案下窗口宽度小于500px时表格会自适应占满窗口，窗口大于500px时表格宽度固定为500px不再拉伸。

• 方案3：固定每一列的宽度
  如果你需要每列宽度固定不随内容或窗口变化，可以搭配table-layout: fixed属性使用：

  table {
    width: 400px; /* 表格总宽度 */
    table-layout: fixed;
  }
  th, td {
    width: 50%; /* 两列各占总宽度的一半，也可以设置为固定像素值 */
  }
  

内容的提问来源于stack exchange，提问作者Supersuslik