css - 絶対div内のCSSテーブル

Question

JS Fiddle デモをご覧ください:

html:

    <div class="r">
    <div class="e_1">xxx</div>
    <div class="e_2">

        <div class="e_c" >

            <table class="e_c">
                <tr>
                    <td>dsdssdsds</td>
                </tr>
                <tr>
                    <td>ssss</td>
                </tr>
            </table>

        </div>
    </div>
</div>

CSS:

.r {
    position: relative;
}

.e_1 {
    position: absolute;
    top:0;
    bottom:0;
    height: 40px;
    overflow: hidden;
}

.e_2 {
     position: absolute;
    top: 40px;
    bottom: 0px;
    border: 1px solid red;
}

.e_c {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

コードでわかるように (これは私の実際のケースの単なるデモです) div .e_2、. しかし、これがブラウザによってレンダリングされると、要素table内には表示されません。をラップし.e2たい。期待される結果は、テーブルの周りに赤い境界線が表示されることです。.e_2 divtable

HTML構造を変更しない場合、どうすればそれを行うことができますか?

Answer 1

テーブルだけに赤い境界線を付けたい場合は、border プロパティを使用します。

border:1px solid red;

したがって、あなたの場合は次のようになります。

.e_c {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    border:1px solid red;
}

ただし、本当に div をテーブルに巻き付けたい場合は、position のプロパティを e_c および e_2 から relative に変更します。

.e_2 {
     position: relative;
    top: 40px;
    bottom: 0px;
    border: 1px solid red;
}

.e_c {
    bottom: 0;
    left: 0;
    position: relative;
    right: 0;
    top: 0; 
}

ただし、表示プロパティを .e_2 クラスに追加しない限り、これにより div が幅全体に拡張されます。

.e_2 {
    display: inline-block;
    position: relative;
    top: 40px;
    bottom: 0px;
    border: 1px solid red;
}

Answer 2

ここで更新されたフィドルを参照してください: http://jsfiddle.net/designingsean/BeeUY/5/

最大の問題は、テーブルの親がすでに position:absolute であるため、テーブルを position:absolute にする必要がないことです。これでテーブルの配置は修正されますが、境界線が正しくありません。これを修正する最善の方法は、含まれている div ではなく、テーブル自体に境界線を配置することです。

CSS の影響を受ける部分:

.e_2 {
  position: absolute;
  top: 40px;
  bottom: 0px;  
}

.e_c {
  border: 1px solid red;
}

Answer 3

.e_c table.e_c {
    border:1px solid red
}