0

2 つの div ボックスが隣り合っています。「div テーブル」を含む左のボックス。ページのサイズを変更するとき、左側の div テーブルの内容を非表示にします (たとえば、overflow: hidden)。ただし、左側のボックスには「残りの」スペースが含まれていますが、右側のボックスの幅は 35% です。

div テーブルの内容が「残りのスペース」(左のボックスの幅) よりも広い場合、テーブルの右の境界線が表示されなくなります。

残りの画像を非表示にしたいのですが、div テーブルの右側の境界線が表示されたままです。これはdivテーブルを使用して行うことができますか?

HTML

    <div class="table" id="containerRight">Some content on the right</div>
<div id="containerLeft">
    <div class="table" id="tableLeft">
        <div class="table-row">
            <div class="table-cell">
                <div style="width:14px;"></div>
            </div>
            <div class="table-cell">Some title</div>
            <div class="table-cell">
                <div style="width:14px;"></div>
            </div>
        </div>
        <div class="table-row">
            <div class="table-cell"></div>
            <div class="table-cell">
                    <!-- This is the content of the LEFT table -->
                    <img src="http://oasis-church-nj.com/wp-content/uploads/2011/04/easter-egg.jpg" style="height:100px; width:500px;" />
            </div>
            <div class="table-cell"></div>
        </div>
        <div class="table-row">
            <div class="table-cell"></div>
            <div class="table-cell"></div>
            <div class="table-cell"></div>
        </div>
    </div>
</div>

CSS

.table {
    display:    table;
    overflow:   hidden;
    border-collapse:    collapse;
}

.table-row {
    display:    table-row;
}

.table-cell {
    display:    table-cell;
    word-break: all;
    overflow: hidden;
}

#containerLeft {
    background: #F0F;
    position:   relative;
    display:    block;
    overflow:   hidden;
    margin:     0px 0px 15px 0px;
}

#containerRight {
    background: #FF0;
    position:   relative;
    min-width:  220px;
    max-width:  400px;
    width:      35%;
    height:     300px;
    float:      right;
    margin:     0px 0px 15px 15px;
}

例はここにあります。HTML テーブルの幅を広げて小さくすると、右の境界線が消えます。 http://jsfiddle.net/gqmJ9/

4

1 に答える 1