title: prevent bootstrap table being wider than span
body: <p>Below is a content which is usually generated dynamically. In the main part of the page there is a <code>&lt;div class="span6"&gt;</code> . Sometimes the Table in this div becomes wider than the div itself (I ve checked the css, the width is set to 100%) . If I only put short text into the table, or if i make the div wider everything is fine.
  The Questions are:</p>
  
  <ol>
  <li>Why can a table become wider than <code>div class=spanX</code>? I always thought, a block element takes the width of its parent?</li>
  <li>The number of characters/spaces in the respective <code>td</code> of the table can vary. How do I prevent the table from growing wider than the div? Of course I can dynamically check for the number of characters in a <code>ts</code> but what do i do with this information?</li>
  </ol>
  
  <p><a href="http://jsfiddle.net/vNnc6/">http://jsfiddle.net/vNnc6/</a></p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="de"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;MySite&lt;/title&gt;
  &lt;meta name="author" content="me"/&gt;
  
  &lt;link href="static/css/bootstrap.css" rel="stylesheet"&gt;
  &lt;link href="static/css/bootstrap-responsive.css" rel="stylesheet"&gt;
  &lt;link href="static/profhase.css" rel="stylesheet"&gt;
  
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="static/bootstrap/js/bootstrap.js"&gt;&lt;/script&gt;
  
  
  &lt;body&gt;
    &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
      &lt;div class="navbar-inner"&gt;
        &lt;div class="container"&gt;
      &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;/a&gt;
  
      &lt;ul class="nav"&gt;
        &lt;li&gt;&lt;a class="brand" href="profhase"&gt;MyBrand&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#contact"&gt;Blog&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
        &lt;div class="nav pull-right collapse nav-collapse" style="hight: 0px"&gt;
          &lt;ul class="nav collapse nav-collapse"&gt;
            &lt;li&gt;&lt;p class="navbar-text"&gt;Apps: &lt;/p&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="firstapp/"&gt;AppOne &lt;i class="icon-lock"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
        &lt;div class="span2"&gt;
      &lt;p&gt;
        My Wonderful sidebar
      &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="span6" style="background:red;"&gt;
      &lt;table class="table"&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;th&gt;Header1&lt;/th&gt;
            &lt;th&gt;Header2&lt;/th&gt;
            &lt;th&gt;Header3&lt;/th&gt;
            &lt;th&gt;Header4&lt;/th&gt;
            &lt;th&gt;Header5&lt;/th&gt;
            &lt;th&gt;Header6&lt;/th&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
            &lt;td&gt;My first Test&lt;/td&gt;
            &lt;td&gt;My second Test&lt;/td&gt;
            &lt;td&gt;My third Test&lt;/td&gt;
            &lt;td&gt;My fifth Test&lt;/td&gt;
            &lt;td&gt;My lalalalalong long lelong long long Test&lt;/td&gt;
  
            &lt;td&gt;
          &lt;div class="btn-group"&gt;
            &lt;a class="btn dropdown-toggle" data-toggle="dropdown"&gt;
              Dropdown Choices &lt;span class="caret"&gt;&lt;/span&gt;
            &lt;/a&gt;
  
            &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a id=1&gt;First wonderful choice&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
  
          &lt;/div&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>