如何防止表格在调整大小时溢出其封闭的 div？答案

【问题标题】：How to prevent a table from overflowing its enclosing div on resize?如何防止表格在调整大小时溢出其封闭的 div？
【发布时间】：2017-05-05 16:11:22
【问题描述】：

我有一个使用 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>

【问题讨论】：

使用媒体查询隐式调整较小视口上的表格宽度。
这是从什么屏幕尺寸开始的？

标签： html css angularjs twitter-bootstrap-3 smart-table

【解决方案1】：

我发现的最佳解决方案是修改封闭的div 样式并设置最小宽度。这可以防止封闭的父 div 缩小到内容大小以下，并且效果很好。

<div class="col-lg-3" style="min-width: 350px;">
    ...
</div>

【讨论】：