如何防止动态创建的 table 溢出其 div?
How to prevent dynamically created table from overflowing its div?
这是正在发生的事情的图片。我想要垂直和水平滚动条和 table 来填充它的容器 div 而不是溢出。
显示的 dividers 来自名为 gridsplit 的 jquery 库。
<script src="dist/jquery.gridsplit.optimised.js"></script>
table header 是 hard-coded 但 body 是动态创建的。
这是一次尝试的 html:
<div style="float:left; overflow:auto; width:100%; height:95%">
<div id="grid4" class="grid">
<div class="innerGrid">
<div id="leftCol" class="gridColumn" gs-width="15%">
<div class="gridCell" gs-height="60%">
<div class="fillCell">
<div id="parent">
<select id="selectWatchlist" style="float:left"><option value="My Portfolio">My Portfolio</option></select>
<button id="addSymbol" type="button" class="btn btn-primary">
<i class="glyphicon glyphicon-plus-sign"></i> Syms
</button>
</div>
<div style="display:table-cell">
<table id="watchlist" style="width:100%; border:0; cellpadding:0; cellspacing:0; margin-bottom:5px;">
<tr>
<th>Sym</th><th>Price</th><th>% Change</th>
</tr>
</table>
</div>
</div>
</div>
<div class="gridCell" gs-height="40%">
<div class="fillCell"><a>Notes</a></div>
</div>
我整天都在谷歌搜索,尝试了几十种组合都无济于事。建议?
解决方案是像这样简单地添加 display:block
:
.gridCell .fillCell {
height: 100%;
display: block;
overflow:auto;
}
现在它有滚动条并且不会溢出。这是一张图片:
我可以发誓我试过了,但显然没有。
这是正在发生的事情的图片。我想要垂直和水平滚动条和 table 来填充它的容器 div 而不是溢出。
显示的 dividers 来自名为 gridsplit 的 jquery 库。
<script src="dist/jquery.gridsplit.optimised.js"></script>
table header 是 hard-coded 但 body 是动态创建的。
这是一次尝试的 html:
<div style="float:left; overflow:auto; width:100%; height:95%">
<div id="grid4" class="grid">
<div class="innerGrid">
<div id="leftCol" class="gridColumn" gs-width="15%">
<div class="gridCell" gs-height="60%">
<div class="fillCell">
<div id="parent">
<select id="selectWatchlist" style="float:left"><option value="My Portfolio">My Portfolio</option></select>
<button id="addSymbol" type="button" class="btn btn-primary">
<i class="glyphicon glyphicon-plus-sign"></i> Syms
</button>
</div>
<div style="display:table-cell">
<table id="watchlist" style="width:100%; border:0; cellpadding:0; cellspacing:0; margin-bottom:5px;">
<tr>
<th>Sym</th><th>Price</th><th>% Change</th>
</tr>
</table>
</div>
</div>
</div>
<div class="gridCell" gs-height="40%">
<div class="fillCell"><a>Notes</a></div>
</div>
我整天都在谷歌搜索,尝试了几十种组合都无济于事。建议?
解决方案是像这样简单地添加 display:block
:
.gridCell .fillCell {
height: 100%;
display: block;
overflow:auto;
}
现在它有滚动条并且不会溢出。这是一张图片:
我可以发誓我试过了,但显然没有。