Bootstrap 3 overflow tabella fuori pannello

Question

Sto usando la tabella bootstrap all'interno di un pannello, che è overflow al di fuori del pannello se contiene informazioni lunghe, come può essere risolta?

<div class="col-sm-3" role="complementary"> 

<div class="panel panel-default"> 
    <div class="panel-body table-responsive"> 
    <table class="table table-bordered table-condensed f11"> 
     <tr> 
      <td colspan="2" align="center" class="info"><b>Info</b></td> 
     </tr> 
     <tr> 
      <td width="35%"><b>Agent</b></td> 
      <td width="65%">Luckystar Auto</td> 
     </tr> 
     <tr> 
      <td><b>WhatsApp</b></td> 
      <td>5412876542</td> 
     </tr> 
     <tr> 
      <td><b>WeChat</b></td> 
      <td>Luckystar88899</td> 
     </tr> 
     <tr> 
      <td><b>Facebook</b></td> 
      <td>www.facebook.com/luckystar88899-abcd</td> 
     </tr> 
    </table> 
    </div> 
</div> 

<div class="panel panel-default"> 
    <div class="panel-body"> 


     <p><div id="map-canvas"></div></p> 
    </div> 
</div> 

Answer 1

Accadrà in quanto il link url è troppo ampia.

Una soluzione è quella di utilizzare i puntini di sospensione CSS per troncare il contenuto della cella in base alle esigenze:

.table { 
    table-layout:fixed; 
} 

.table td { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 

} 

Demo: http://bootply.com/128979