verhindern Bootstrap-Tabelle ist breiter als span

Unten ist ein Inhalt, der in der Regel dynamisch generiert wird. Im Hauptteil der Seite befindet sich ein <div class="span6">. Manchmal wird die Tabelle in diesem div breiter als das div selbst (Ich habe die CSS überprüft, die Breite ist auf 100% gesetzt). Wenn ich nur kurzen Text in den Tisch lege, oder wenn ich den div breiter mache, ist alles in Ordnung. Die Fragen sind:verhindern Bootstrap-Tabelle ist breiter als span

Warum eine Tabelle breiter als div class=spanX werden kann? Ich dachte immer, ein Blockelement nimmt die Breite seines Elternteils?
Die Anzahl der Zeichen/Leerzeichen in der jeweiligen td der Tabelle kann variieren. Wie verhindere ich, dass der Tisch breiter wird als das div? Natürlich kann ich dynamisch nach der Anzahl der Zeichen in einem ts suchen, aber was mache ich mit diesen Informationen?

http://jsfiddle.net/vNnc6/

Die 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>

Quelle

2013-05-25 ProfHase85

Dank der Antwort von FelipeAls dieser Code es tat:

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

Eine andere Möglichkeit ist nicht Zeilenumbruch zu verwenden, aber mit so etwas wie ...

http://jsfiddle.net/zzmfA/

Quelle

2013-05-26 12:02:35 ProfHase85

ich die Eltern von span6 bemerkt angezeigt wird, wie table aber span6 schwimmt. Das Entfernen der Schwimmer und die Einstellung der span* zu display: table-cell Werke: fiddle
Hinweis: Es gibt eine weitere geeignete Klasse als span* in TB aufweisen kann, eine Klasse, die bereits display: table-cell hat.
Andere Lösung, aber wahrscheinlich nicht das, was Sie erreichen wollen: die Technik der „mit overflow: hidden; ein Element neben einem Floating Element“: Working fiddle
Die Erklärung dieser Magie genannt wird block formatting context (T. J. Koblentz' blog)-question on SO

Quelle

2013-05-25 20:06:09 FelipeAls

verhindern Bootstrap-Tabelle ist breiter als span

Antwort

Verwandte Themen