表height属性似乎没有任何效果

我有HTML的结构是这样的：表height属性似乎没有任何效果

<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用户可以滚动，我在这里丢失什么提示？

当我改变工作台的高度为>然后190px，表反应也逐渐变大，但如果我更改为更小的尺寸，即165像素或以下任何190px似乎并不如果你希望它回应

来源

2012-11-04 London

您在表格上根本不使用任何高度属性。你期望影响桌子的高度是什么？ – Guffa

添加'高度：100％'或任何高度都不会改变任何东西，这就是为什么我要求我不知道下一步该怎么做 – London

添加'height：100％'确实会改变表格的高度。请参阅下面的答案中的演示。 – Guffa

Addig height: 100%表样式并使其继承父元素的高度：

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

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

注：该表秉承高度的中的指定高度父母，即165px，而不是包括填充的身高，即175px。

来源

2012-11-04 15:56:29 Guffa

100%高，给它height: 100%。目前你根本没有指定高度。

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

来源

2012-11-04 15:32:42 GolezTrol

添加'高度：100％'或任何高度都不会改变任何内容 – London

尝试将高度规则赋予表格单元格... – Eamonn

表height属性似乎没有任何效果

回答

相关问题