html - 表格高度属性似乎没有任何影响

Question

我有这样的 HTML 结构:

<div class="wrapper">
<table>
<tbody>
<tr>
<td>some content</td>
</tr>
</tbody>
</table>
</div>

我的包装风格是这样的:

.wrapper{
color: #444444;
    height: 165px;
    line-height: 135%;
    margin-top: 10px;
    padding-bottom: 10px;
    width: 270px;
}

我的表格只定义了宽度和一些继承的样式:

.wrapper> table {
    width: 100%;
}
table {
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    max-width: 100%;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

我想要做的是，我的表格消耗了父元素的最大高度，即 .wrapper 其高度值为 165px 但由于某种原因表格高度没有减少.

我的最终目标是在 wrapper 上设置一个 y-overflow，这样如果表格变大到用户可以滚动的 .wrapper，我在这里缺少什么提示？

当我将表格高度更改为 > 然后是 190px 时，表格的 react 是它变大了，但是如果我更改为更小的尺寸，即 165px 或任何低于 190px 的尺寸，它似乎没有响应

Answer 1

将 height: 100% 添加到表格样式确实使其从父元素继承高度:

.wrapper> table {
  width: 100%;
  height: 100%;
}

演示:http://jsfiddle.net/WDFa2/

注意:表格继承的高度是父级的特定高度，即165px，而不是包含padding的高度，即175px。