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

我有一个表使用引导3和一些自定义CSS定义。当我调整浏览器窗口的大小时，它会结束溢出表格，超出了封闭div的宽度，如下图所示。我使用IE和开发人员工具显示没有影响此行为的计算表属性。我还检查了tr和td动态计算的属性，但仍未找到此行为的罪魁祸首。如何防止表格在调整大小时溢出其封闭div？

任何人都可以提供一些线索成什么设置，可以发人深省的吗？

<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>

来源

2017-05-04 Giovanni Azua

使用媒体查询来隐式调整较小视口上的表格宽度。 – Korgrue

这是从什么尺寸开始的？ – blecaf

我已经找到了最好的解决办法是修改封闭div风格和设定的最小宽度。这可以防止封闭父母div在内容大小下方收缩并且工作良好。

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

来源

2017-05-05 08:11:22

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

回答

相关问题