如何调整嵌套在另一表格内部的表格大小？

嵌套表格宽高设置不生效，本质是默认表格自动布局逻辑下，内层表格尺寸会被父级单元格的分配规则强制约束，直接写属性会被布局规则覆盖，可按以下方案逐一排查解决：

• 优先修改外层表格布局模式
  给外层表格设置table-layout: fixed，关闭默认的内容自适应自动布局，外层表格必须先指定明确的宽度值，同时清除父单元格的默认内边距，避免占用内层表格的可用空间，此时内层表格设置的宽高即可正常生效，代码示例：

  /* 外层表格 */
  table.parent {
    table-layout: fixed;
    width: 1200px;
    border-collapse: collapse;
  }
  /* 内层表格所在的父单元格 */
  table.parent td {
    padding: 0;
    vertical-align: top;
  }
  /* 内层表格 */
  table.child {
    width: 700px;
    height: 400px;
  }
  

• 转换内层表格的显示模式
  如果不想修改外层表格的布局逻辑，可以直接给内层表格设置display: block，将其从默认的表格元素转为块级元素，脱离父表格的布局约束，此时设置的宽高会独立生效。如果担心内部表格内容挤压，可以额外加overflow: auto，内容超出时自动显示滚动条：

  table.child {
    display: block;
    width: 700px;
    height: 400px;
    overflow: auto;
  }
  

• 排查样式优先级冲突
  打开浏览器开发者工具，选中内层表格查看计算样式面板，确认你设置的width/height是否被更高优先级的CSS规则覆盖——常见的冲突来源包括全局表格样式、UI框架默认样式、父元素继承的width: 100%规则，如果是优先级问题，可以通过提升选择器权重的方式让自定义宽高生效，不推荐长期滥用!important强制覆盖。

避坑提醒：不要试图只给内层表格套一层空div再给div设宽高，默认自动布局模式下，div作为单元格内的普通流元素，尺寸同样会被父单元格强制撑开，无法达到调整尺寸的效果。

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