使元素的宽度取决于其祖父母的动态宽度 - 同时具有固定宽度的父级

Question

皮尤，听起来很复杂，对吧？我试着把它描述得尽可能好。基本上，我们有三个元素：一个宽度为auto的div，一个宽度正好为500的表和一个宽度也应该是auto的span，但完全取决于表的单元格宽度。

让我告诉你：

<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>

这是CSS;带边框以提高清晰度：

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;
}

呈现，它看起来像这样：

非常好。注意到绿色虚线边框？这就是div：与浏览器窗口一样宽。但是，如果我调整整个事情的大小，它看起来像这样：

现在看看绿色边框：div按预期正确调整自身大小。尽管如此，红色虚线边框（跨度）仍然与桌子一样宽。它是否有可能根据div而不是表格来调整自身的大小，因此您仍然可以阅读整个文本？

提前致谢。

Answer 1

尝试表格宽度的百分比，使其变得流动，如宽度：26％如果您的屏幕尺寸为1920px。 500/1920 * 100.所以他会适应屏幕大小，但如果你想要全屏固定宽度，你必须使用一些媒体查询后更小。