如果我在 display: table; 元素中添加 block 元素，它们不会扩展到表格的 100% 宽度，而是扩展到表格第一列的 100% 宽度。如果我手动向此 block 元素添加一个更大的非百分比“px”宽度值，它还会导致表格的第一列随之扩展得更宽。无论此 block 元素的位置如何(顶部或底部)都会发生。
我有一个 fiddle 来传达这一点:https://jsfiddle.net/ugdre5s9/1/ .请注意顶部的 .table-caption-div 元素和行底部和中间的 .full-width-row 元素没有扩展到第一列宽度之外。我尝试将这些元素包装在 display: table-row; 中，但这也无济于事。
然后我如何插入一个元素作为 display: table; 节点的子节点，该节点将扩展到完整的 100% 宽度？
最佳答案
block 被放置在一个匿名表格单元格中，该单元格跨越单个列。
您无法在 CSS 中指定单元格框应跨越多少行或多少列。这是 CSS 表格模型最大的局限之一。但是在你的 fiddle 中，你可以通过使用一个表并用一个实际的 caption 元素替换你的 .table-caption-div 来完全解决问题，因为你有有一个是一个表格，应该这样标记而不是一堆语义上无意义的 div(好吧，除了全 Angular 行，它们应该是完全独立的元素，而不是硬塞进表格，就好像它们是表格数据的一部分一样)。
关于css - 为什么 css 表格中的 block 元素子元素不占用 100% 的宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35883550/