title: Bootstrap 3 table overflow out of panel
body: <p>I'm using bootstrap table inside a panel, which is overflow outside of panel if contains long information, how can it be fix? </p>
  
  <p><img src="https://i.stack.imgur.com/4iXNP.jpg" alt="enter image description here"></p>
  
  <pre><code>&lt;div class="col-sm-3" role="complementary"&gt;
  
  &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-body table-responsive"&gt;
      &lt;table class="table table-bordered table-condensed f11"&gt;
          &lt;tr&gt;
              &lt;td colspan="2" align="center" class="info"&gt;&lt;b&gt;Info&lt;/b&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td width="35%"&gt;&lt;b&gt;Agent&lt;/b&gt;&lt;/td&gt;
              &lt;td width="65%"&gt;Luckystar Auto&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;b&gt;WhatsApp&lt;/b&gt;&lt;/td&gt;
              &lt;td&gt;5412876542&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;b&gt;WeChat&lt;/b&gt;&lt;/td&gt;
              &lt;td&gt;Luckystar88899&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;b&gt;Facebook&lt;/b&gt;&lt;/td&gt;
              &lt;td&gt;www.facebook.com/luckystar88899-abcd&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-body"&gt;
  
  
        &lt;p&gt;&lt;div id="map-canvas"&gt;&lt;/div&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>