Html 使元素的宽度取决于其祖辈的动态宽度——同时具有固定宽度的父元素

皮尤，听起来很复杂吧？我尽可能地描述它。所以基本上，我们有三个元素：一个div的宽度是auto，一个表的宽度正好是500，一个span的宽度也应该是auto，但它完全依赖于表的单元格宽度

让我给你看看：

<div>
  <table>
    <tr>
      <td><span>Some random content</span></td>
      <td><span>Some random content</span></td>
    </tr>
    <tr>
      <td><span>Some random content</span></td>
      <td><span>Some random content</span></td>
    </tr>
  </table>
</div>

渲染后，它看起来像这样：

很好。注意到绿色点的边框了吗？这就是div：与浏览器窗口一样宽。但是，如果我调整整个对象的大小，它看起来是这样的：

现在看看绿色边框：div按照预期正确地调整了大小。不过，跨度上的红色虚线仍然和桌子一样宽。它是否可能根据div而不是表格调整自身大小，以便您仍然可以读取整个文本

---

提前感谢。

尝试表格宽度的百分比，使其流畅，例如宽度：如果屏幕大小为1920px，则为26%。500/1920 * 100. 所以他会适应屏幕大小，但如果你想在全屏时保持固定的宽度，并且在使用一些媒体查询后变小。

我不太清楚你想在这里实现什么。为什么不把div改为500px，然后把表的宽度设为100%？我认为width:inherit就足够了。这可不是那么容易的。这个例子非常简单，实际的表是一个脚本化的表。它需要保持该大小，并且应该适用于多种窗口大小。除此之外，它甚至不起作用，我只是试了一下。在调整窗口大小时，你能在$window中设置表宽：auto.resizefunction{}；

table, tr, td {
    border: 1px solid black;
}

table {
    width: 500px;
}

span {
    border: 1px dotted red;
    display: block;
    word-wrap: break-word;
}

div {
    border: 1px dotted green;
}