サイズ変更時にテーブルをオーバーフローさせないようにするにはどうすればいいですか？

Question

私はブートストラップ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> 

Answer 1

私が見つけた最良の解決策を囲むdivスタイルを変更し、最小幅を設定することでした。これにより、包含する親のdivが内容のサイズよりも小さくなるのを防ぎ、大きな効果を発揮します。

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