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-overflowon ラッパーを設定することだったので、ユーザーがスクロールできるほどテーブルが大きくなった場合.wrapper、ここで何が欠けているのでしょうか?

テーブルの高さを > 190px に変更すると、テーブルが反応して大きくなりますが、小さいサイズ、つまり 165px または 190px 未満に変更すると、応答しないようです。

4

2 に答える 2

0

テーブル スタイルにAddigheight: 100%を追加すると、親要素から高さが継承されます。

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

デモ: http://jsfiddle.net/WDFa2/

注: テーブルが継承する高さは、親の特定の高さです。165pxつまり、パディングを含む高さではありません175px。

于 2012-11-04T15:56:29.943 に答える
0

高くしたい場合は100%、与えてheight: 100%ください。現在、高さをまったく指定していません。

テーブルはすべての高さの規則に従うわけではないことに注意してください。内容が合わない場合は、少し頑固かもしれません。;)

于 2012-11-04T15:32:42.790 に答える