impedisce la tabella bootstrap che è più ampia di span

Di seguito è un contenuto che viene in genere generato dinamicamente. Nella parte principale della pagina c'è un <div class="span6">. A volte la tabella in questo div diventa più ampia della div stessa (ho controllato il css, la larghezza è impostata al 100%). Se metto un testo breve nel tavolo, o se faccio il div più ampio, tutto va bene. Le domande sono:impedisce la tabella bootstrap che è più ampia di span

Perché può diventare un tavolo più ampio rispetto div class=spanX? Ho sempre pensato, un elemento di blocco prende la larghezza del suo genitore?
Il numero di caratteri/spazi nel rispettivo td della tabella può variare. Come posso evitare che la tabella cresca più larga della div? Naturalmente posso verificare dinamicamente il numero di caratteri in un ts ma cosa devo fare con queste informazioni?

http://jsfiddle.net/vNnc6/

Il codice HTML:

<!DOCTYPE html> 
<html lang="de"> 
<head> 
<meta charset="utf-8"> 
<title>MySite</title> 
<meta name="author" content="me"/> 

<link href="static/css/bootstrap.css" rel="stylesheet"> 
<link href="static/css/bootstrap-responsive.css" rel="stylesheet"> 
<link href="static/profhase.css" rel="stylesheet"> 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script type="text/javascript" src="static/bootstrap/js/bootstrap.js"></script> 


<body> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="navbar-inner"> 
     <div class="container"> 
    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </a> 

    <ul class="nav"> 
     <li><a class="brand" href="profhase">MyBrand</a></li> 
     <li><a href="#">Home</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#contact">Blog</a></li> 
    </ul> 

     <div class="nav pull-right collapse nav-collapse" style="hight: 0px"> 
     <ul class="nav collapse nav-collapse"> 
      <li><p class="navbar-text">Apps: </p></li> 
      <li><a href="firstapp/">AppOne <i class="icon-lock"></i></a></li> 
     </ul> 
     </div> 
     </div> 
    </div> 
    </div> 

    <div class="container-fluid"> 
    <div class="row"> 
     <div class="span2"> 
    <p> 
     My Wonderful sidebar 
    </p> 
     </div> 
     <div class="span6" style="background:red;"> 
    <table class="table"> 
     <tbody> 
     <tr> 
      <th>Header1</th> 
      <th>Header2</th> 
      <th>Header3</th> 
      <th>Header4</th> 
      <th>Header5</th> 
      <th>Header6</th> 
     </tr> 

     <tr> 
      <td>My first Test</td> 
      <td>My second Test</td> 
      <td>My third Test</td> 
      <td>My fifth Test</td> 
      <td>My lalalalalong long lelong long long Test</td> 

      <td> 
     <div class="btn-group"> 
      <a class="btn dropdown-toggle" data-toggle="dropdown"> 
      Dropdown Choices <span class="caret"></span> 
      </a> 

      <ul class="dropdown-menu"> 
      <li><a id=1>First wonderful choice</a></li> 
      </ul> 

     </div> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
     </div> 
    </div> 
    </div> 

</body>

fonte

2013-05-25 ProfHase85

Grazie alla risposta da FelipeAls questo codice lo ha fatto:

table { 
    table-layout: fixed; 
    word-wrap: break-word; 
}

Un'altra possibilità è di non usare il ritorno a capo, ma avere qualcosa di simile ...

http://jsfiddle.net/zzmfA/

fonte

2013-05-26 12:02:35 ProfHase85

ho notato il genitore di span6 viene visualizzato come table ma span6 è flottante. Rimozione del galleggiante e impostando le span* a display: table-cell lavori: fiddle
Nota: ci può avere una classe più adatto di span* in TB, una classe che ha già display: table-cell.
Altro soluzione, ma probabilmente non è quello che si vuole raggiungere: la tecnica di "un elemento con overflow: hidden; a fianco di un elemento flottante": Working fiddle
La spiegazione di questa magia si chiama block formatting context (T. J. Koblentz' blog)-question on SO

fonte

2013-05-25 20:06:09 FelipeAls

impedisce la tabella bootstrap che è più ampia di span

risposta

Problemi correlati