title: Responsive table makes layout go beyond 100% width
body: <p>Demo: <a href="http://codepen.io/anon/pen/JdWrKX?editors=110" rel="nofollow noreferrer">http://codepen.io/anon/pen/JdWrKX?editors=110</a></p>
  
  <p>As you can see there is a responsive table inside ".panel" which you can scroll horizontally. Great.</p>
  
  <p>But it makes the entire page expand horizontally and not fit in the window.
  Try on small screens to see the bug.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="wrap"&gt;
  
    &lt;nav class="navbar navbar-inverse navbar-static-top" role="navigation"&gt;
      &lt;div class="container-fluid"&gt;
        &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
            &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&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;/button&gt;
          &lt;a class="navbar-brand" href=""&gt;Logo&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
          &lt;ul class="nav navbar-nav navbar-right"&gt;
            &lt;li&gt;
              &lt;a href=""&gt;Logout&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  
    &lt;div class="content content-primary content-sm"&gt;
      &lt;div class="container-fluid"&gt;
  
        &lt;div class="row"&gt;
          &lt;div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3"&gt;
            &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-body"&gt;
                &lt;div class="table-responsive"&gt;
                  &lt;table class="table-bordered"&gt;
                    &lt;tr&gt;
                      &lt;td&gt;
                        &lt;div&gt;a&lt;/div&gt;
                      &lt;/td&gt;
                      &lt;td&gt;b&lt;/td&gt;
                    &lt;/tr&gt;
                  &lt;/table&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;footer&gt;
      &lt;nav class="navbar navbar-inverse navbar-static-top" role="navigation"&gt;
        &lt;div class="container-fluid"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;a class="navbar-brand" href=""&gt;Copyright&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
            &lt;ul class="nav navbar-nav navbar-right"&gt;
              &lt;li&gt;
                &lt;a href=""&gt;Logout&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
    &lt;/footer&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html,
  body {
    height: 100%;
  }
  
  #wrap {
    height: 100%;
    display: table;
    width: 100%;
  }
  
  #wrap &gt; nav,
  footer {
    display: table-row;
  }
  
  nav.navbar {
    margin-bottom: 0;
  }
  
  .content-sm {
    padding: 15px 0;
  }
  
  .content-primary {
    background: #337ab7;
  }
  
  .content {
    display: table-cell;
    height: 100%;
  }
  
  td {
    text-wrap: no-warp;
  }
  
  td div {
    width: 900px;
  }
  </code></pre>