How to prevent a table from overflowing its enclosing div on resize?

Question

I have a table defined using bootstrap 3 and some custom css. When I resize the browser window it ends overflowing the table beyond the width of the enclosing div as shown in the picture below. I am using IE and the developers tool shows no computed table attribute affecting this behavior. I also checked the tr and td dynamically computed attributes and still no luck finding the culprit for this behavior.

Can anyone shed some light into what settings could be provoking this?

<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

The best solution I have found was to modify the enclosing div style and set a minimum width. This prevents the enclosing parent div from shrinking below the contents size and it works great.

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