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/