Bootstrap 3 Tabellenüberlauf außerhalb des Panels

Question

Ich benutze Bootstrap-Tabelle in einem Panel, das Überlauf außerhalb des Panels ist, wenn lange Informationen enthält, wie kann es behoben werden?

<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

Es wird die URL-Link zu breit ist geschehen, da.

Eine Abhilfe ist CSS Auslassungszeichen zu verwenden, um die Zellinhalte gestutzt nach Bedarf:

.table { 
    table-layout:fixed; 
} 

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

} 

Demo: http://bootply.com/128979