[英]How to prevent a table from overflowing its enclosing div on resize?
我有一个使用bootstrap 3和一些自定义CSS定义的表。 当我调整浏览器窗口的大小时,它结束了表溢出,超出了封闭的div的宽度,如下图所示。 我正在使用IE,开发人员工具未显示影响此行为的计算表属性。 我还检查了tr
和td
动态计算的属性,仍然没有运气找到这种行为的元凶。
任何人都可以阐明可能导致此情况的设置吗?
<div class="pad-top pad-side">
<div class="row">
<div class="col-lg-3">
<div class="panel panel-default" ng-show="{{reportData.PnlStatistics != undefined}}" style="height: 380px">
<div class="panel-heading">
<label>Expected In-Sample PnL Statistics</label>
</div>
<div class="panel-body" style="padding-top: 5px;">
<table class="table table-x-condensed table-striped table-hover table_nowrap" id="pnlStatisticsTable" st-safe-src="pnlStatistics"
st-table="displayedPnlStatistics">
<thead>
<tr>
<th style="width: 60%;" id="name">Name</th>
<th style="width: 20%;" id="daily">Daily</th>
<th style="width: 20%;" id="optimal">Optimal</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in displayedPnlStatistics">
<td style="width: 60%; padding-top: 0px; padding-bottom: 0px;">{{data.name}}</td>
<td style="width: 20%; padding-top: 0px; padding-bottom: 0px;">{{data.DailyHedge}}</td>
<td style="width: 20%; padding-top: 0px; padding-bottom: 0px;">{{data.OptimalHedge}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
我发现最好的解决方案是修改div
样式并设置最小宽度。 这样可以防止封闭的父div
缩小到内容大小以下,并且效果很好。
<div class="col-lg-3" style="min-width: 350px;">
...
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.