title: Fitting a table properly in bootstrap3
body: <p>I have this simple table. How do I prevent the table  from overflowing the boundaries of the panel ? What is the right way to handle this in bootstrap when the contained table has cell data that is too long? I looked at panel with table example here to write what I have:</p>
  
  <p><a href="http://getbootstrap.com/components/#panels-tables" rel="nofollow noreferrer">Bootstrap panel with table</a></p>
  
  <p>I believe I am using the outer most "container" div incorrectly as well as I am applying row classes to it directly.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-family: 'Oxygen', sans-serif;
    background-color: #3F88BF;
  }
  
  .table-condensed {
    font-size: 12px;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta name="description" content="{{ description }}" /&gt;
      &lt;title&gt;{{title}}&lt;/title&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
      &lt;link rel="stylesheet" href="css/styles.css"&gt;
  
      &lt;link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'&gt;
      &lt;link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="container col-sm-10 col-sm-offset-1"&gt; &lt;!-- div container --&gt;
          &lt;div class="page-header"&gt;
              &lt;h1 id="top"&gt;Some title&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-body"&gt;
                  &lt;h1 id="abc"&gt;ABC&lt;/h1&gt;
                  &lt;a class="pull-right" href="#top"&gt;top&lt;/a&gt;
              &lt;/div&gt;
              &lt;table class="table table-bordered table-condensed table-striped"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Head1&lt;/th&gt;
                          &lt;th&gt;Head2&lt;/th&gt;
                          &lt;th&gt;Head3&lt;/th&gt;
                          &lt;th&gt;Head4&lt;/th&gt;
                          &lt;th&gt;Head5&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Data1&lt;/td&gt;
                          &lt;td&gt;Data2&lt;/td&gt;
                          &lt;td&gt;Data3&lt;/td&gt;
                          &lt;td&gt;Data4&lt;/td&gt; &lt;td&gt;Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data555555&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt; 
          &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>