title: How to allow the table to expand vertically incase it contain long text
body: <p>I am working on an Asp.net MVC web application, and i define the following for the tables layout inside the CSS file.-</p>
  
  <p>I am constructing the Tables using the following code:-</p>
  
  <pre><code>&lt;div class="box-content"&gt;
  &lt;table class="table table-striped table-bordered bootstrap-datatable datatable"&gt;
   &lt;thead&gt;
  &lt;tr&gt;
  //code goes here
  </code></pre>
  
  <p>and i define the following inside CSS file related to formatting the the box-content:-</p>
  
  <pre><code>.box-content{
  padding:10px;
  }
  .box-content .nav-tabs{
  margin-right:-10px;
  margin-left:-10px;
  }
  .box-content.buttons{
  min-height:297px;
  }
  </code></pre>
  
  <p>and i define the following inside CSS file related to formatting the table:-</p>
  
  <pre><code>table {
    max-width: 100%;
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
  }
  .table {
    width: 100%;
    margin-bottom: 18px;
  }
  .table th,
  .table td {
    padding: 8px;
    line-height: 18px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #dddddd;
  }
  .table th {
    font-weight: bold;
  }
  .table thead th {
    vertical-align: bottom;
  }
  .table caption + thead tr:first-child th,
  .table caption + thead tr:first-child td,
  .table colgroup + thead tr:first-child th,
  .table colgroup + thead tr:first-child td,
  .table thead:first-child tr:first-child th,
  .table thead:first-child tr:first-child td {
    border-top: 0;
  }
  .table tbody + tbody {
    border-top: 2px solid #dddddd;
  }
  .table-condensed th,
  .table-condensed td {
    padding: 4px 5px;
  }
  .table-bordered {
    border: 1px solid #dddddd;
    border-collapse: separate;
    *border-collapse: collapsed;
    border-left: 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }
  .table-bordered th,
  .table-bordered td {
    border-left: 1px solid #dddddd;
  }
  .table-bordered caption + thead tr:first-child th,
  .table-bordered caption + tbody tr:first-child th,
  .table-bordered caption + tbody tr:first-child td,
  .table-bordered colgroup + thead tr:first-child th,
  .table-bordered colgroup + tbody tr:first-child th,
  .table-bordered colgroup + tbody tr:first-child td,
  .table-bordered thead:first-child tr:first-child th,
  .table-bordered tbody:first-child tr:first-child th,
  .table-bordered tbody:first-child tr:first-child td {
    border-top: 0;
  }
  .table-bordered thead:first-child tr:first-child th:first-child,
  .table-bordered tbody:first-child tr:first-child td:first-child {
    -webkit-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
  }
  .table-bordered thead:first-child tr:first-child th:last-child,
  .table-bordered tbody:first-child tr:first-child td:last-child {
    -webkit-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
    -moz-border-radius-topright: 4px;
  }
  .table-bordered thead:last-child tr:last-child th:first-child,
  .table-bordered tbody:last-child tr:last-child td:first-child {
    -webkit-border-radius: 0 0 0 4px;
    -moz-border-radius: 0 0 0 4px;
    border-radius: 0 0 0 4px;
    -webkit-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
  }
  .table-bordered thead:last-child tr:last-child th:last-child,
  .table-bordered tbody:last-child tr:last-child td:last-child {
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
    -moz-border-radius-bottomright: 4px;
  }
  .table-striped tbody tr:nth-child(odd) td,
  .table-striped tbody tr:nth-child(odd) th {
    background-color: #f9f9f9;
  }
  .table tbody tr:hover td,
  .table tbody tr:hover th {
    background-color: #f5f5f5;
  }
  </code></pre>
  
  <p>But the problem i am facing is that in case the table contains long text inside any of its cells,  it will go out of the box-content as follow:-
  <img src="https://i.stack.imgur.com/TG9zU.png" alt="enter image description here"></p>