0

我有这样的 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但由于某种原因表格高度没有减少。

我的最终目标是设置一个y-overflow包装器，所以如果表格变得更大以至于.wrapper用户可以滚动，我在这里缺少什么提示？

当我将表格高度更改为 > 然后 190 像素时，表格会做出反应，它会变大，但如果我更改为较小的尺寸，即 165 像素或低于 190 像素，它似乎没有反应

4

2 回答 2

0

如果你想要它100%高，给它height: 100%。目前您根本没有指定高度。

请记住，桌子往往不遵守所有高度规则。如果内容不合适，他们可能会有点固执。;)

于 2012-11-04T15:32:42.790 回答
0

添加height: 100%到表格样式确实使它继承了父元素的高度：

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

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

注意：表格继承的高度是父级的指定高度，即165px，而不是包括填充的高度，即175px。

于 2012-11-04T15:56:29.943 回答