如何将 div 渲染为 100% 的父母而不是孩子答案

【问题标题】：How to render div as 100% of parent not child如何将 div 渲染为 100% 的父母而不是孩子
【发布时间】：2010-11-04 03:15:41
【问题描述】：

我正在尝试在表格单元格中创建一个可滚动面板。

我希望 div 与表格单元格一样宽，然后为内容呈现滚动条。

当我尝试以下操作时，div 将其宽度设置为包含的 span 标签的 100%，而不是单元格

<table cellpadding="3" width="90%" align="center" border="0">
  <tr>
    <td>
       <div style="border: solid 1px red; height: 10px; width: 100%; overflow: auto;">
          <span style="width: 2000px;">a</span>
       </div>
    </td>
  </tr>
</table>

我印象深刻的是，宽度=100% 应该在父级而不是在子级上设置尺寸？

有什么想法吗？

【问题讨论】：

我突然想到跨度可能会影响表格单元格的大小 - 这有意义吗？
如果我们能看到您的其余标记，将会有所帮助。 CSS 宽度对设置宽度的父元素也有一些要求。
是的，我认为跨度是影响单元格宽度的那个。
一个 span 元素甚至不是块级的，所以无论您使用的浏览器是否对其应用了宽度，这在技术上一定是有缺陷的！

标签： html css html-table

【解决方案1】：

空表格单元格没有宽度，跨度是强制单元格宽度的跨度。这就是为什么 div 宽度等于单元格宽度的原因。

【讨论】：

【解决方案2】：

我在包含 div 而不是表格中尝试了它，它工作正常。

我假设内部跨度宽度导致 td 宽度为 2000px

【讨论】：