如何防止表格在調整大小時溢出其封閉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？

回答

相關問題