嵌套div模拟表格布局渲染异常：子容器无法继承父容器宽度求助

我太懂你这种不想额外加CSS类的纠结了——用display: table系列属性模拟Android的线性布局确实是个巧妙的思路，但内层表格的width: 100%失效往往是表格布局的默认计算逻辑在搞怪。

问题根源 #

当你在display: table-cell内部嵌套display: table时，哪怕给内层表格设了width: 100%，它也不会自动填满父cell的宽度。这是因为CSS表格布局的优先级是：先根据内容计算内层表格的最小宽度，再反过来决定外层table-cell的宽度，导致内层的100%其实是“内容宽度的100%”，而不是父cell的实际宽度。

无需新增类的解决方案 #

这里有两个直接生效的方法，都不用加额外类：

方法1：强制内层表格的布局规则

给内层的display: table元素添加两个CSS属性：

display: table;
width: 100%;
table-layout: fixed; /* 关键：强制表格按指定宽度布局，而非内容 */

同时确保外层的display: table已经设置了width: 100%，这样整个外层表格会占满容器，内层表格也会跟着填满父cell。

方法2：改用Flex布局模拟Android布局（更简洁）

如果你的核心需求是模拟Android的线性/弹性布局，其实Flex比CSS表格更灵活，而且天然支持子元素填充满父容器，完全不用纠结table的宽度问题：

• 外层容器用display: flex（对应Android的LinearLayout）
• 需要填充剩余空间的子元素加flex: 1（对应Android的layout_weight="1"）
• 垂直布局就加flex-direction: column

举个例子，模拟Android的水平线性布局，其中一个子元素占满剩余宽度：

<div style="display: flex; width: 100%;">
  <div style="width: 100px; background: #eee;">固定宽度</div>
  <div style="flex: 1; background: #ddd;">填满剩余宽度</div>
</div>

这种方式完全不需要嵌套table，代码更简洁，也不会出现宽度计算异常的问题。

验证小技巧 #

如果还是不确定问题出在哪，可以用浏览器的开发者工具（F12）查看外层table-cell和内层table的计算宽度——你会发现没加table-layout: fixed时，内层table的宽度比cell窄，加了之后就完全匹配了。

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