CSS：如何在水平扩展表格中有一个<div>？

Question

我遇到这种情况：

在HTML5网页上，<div>内有一个<table>，位于另一个<div>内：

< p> https://jsfiddle.net/35mvqtyn/2/
（这是一个非常简单的示例，用于演示效果。请不要建议更新HTML DOM。我在这里纯粹关注CSS。）

内部<div>的宽度超出了浏览器页面宽度（如果它没有，请适当调整浏览器窗口的大小，以使内部<div>的宽度超出浏览器窗口宽度）。没有其他限制。

1. 为什么内部<div>的宽度会溢出？为什么它没有适当地扩展<table>和外<div>宽度以完全覆盖内部<div>的宽度？ （为此行为提供的CSS规范规则是什么？）

2. 我如何拥有包含块元素＆＃39;宽度会自动延伸以完全覆盖内部<div>的宽度？

Answer 1

将div设置为使用display: table-cell;

呈现为表格单元格

body > div
{
  margin: 1ex;
  background-color: white;
  display: table-cell;
}

Answer 2

回答你的第一个问题并补充LJ的回答：这是规范的相关部分，用于解释为什么表扩展为包含内部div而外部div不包含：https://www.w3.org/TR/CSS2/tables.html#auto-table-layout < / p>

从链接（强调我的）：

  

在这个算法中（一般不需要超过两次），   表的宽度由列的宽度给出（和   干预边界）。该算法反映了几种行为   在编写本规范时，流行的HTML用户代理。 UAs是   不需要实现此算法来确定表格布局   在表格布局＆＃39;是＆＃39; auto＆＃39 ;;他们可以使用任何其他   算法，即使它导致不同的行为。

Answer 3

内部div的宽度溢出外部的原因是因为你明确给出了内部宽度的宽度。 CSS始终首先应用于更具体的属性。作为块级元素的外部div倾向于占用整个浏览器宽度，但不占用包含元素的溢出部分。

要使它占据包含元素，你必须使其表现为LJ提到的td元素，或者避免使用内部div的显式宽度值。