title: How do you fix bootstrap table sizing when record result blows it out
body: <p>I have a bootstrap table which is populated by an MVC loop of a model. However when my model renders a large number of records, it causes the table and panel the table is nested in stretch out too much in height. Is there a recommended way of making the table result scrollable when the records returned would exceed the max-height property of the table? A scrollable solution would be optimal.</p>
  
  <p><strong>Styles</strong>
  </p>
  
  <pre><code>.table{
      width:100%;
  }
  thead,tbody,tr,td,th{
      display:grid;
  
  }
  tr:after{ 
      content: ' ';
      display: block;
      visibility:hidden;
      clear:both;
  }
  thead th{
      height: 30px;
  }
  tbody {
      height: 120px;
      overflow-y:auto;
  }
  thead {
  
  }
  
  tbody td. thead th {
      width: 40.2%;
      float: left;
  }
  </code></pre>
  
  <p>
  <strong>Code below: (loop displays 34 records)</strong></p>
  
  <pre><code>&lt;div class="panel panel-primary"&gt;
      &lt;div class="panel-heading clearfix"&gt;
          &lt;h4 class="panel-title pull-left" style="padding-top: 7.5px;"&gt;My Team&lt;/h4&gt;
          &lt;div class="btn-group pull-right"&gt;
              &lt;!--- Search bar--&gt;
              &lt;form class="navbar-form navbar-right" role="search"&gt;
                  &lt;div class="input-group"&gt;
                      &lt;input type="text" class="form-control" placeholder="Search My Team"&gt;
                      &lt;span class="input-group-btn"&gt;
                          &lt;button type="submit" class="btn btn-default"&gt;
                              &lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;
                          &lt;/button&gt;
                      &lt;/span&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;table class="table table-responsive table-hover" style="max-height:150px; height:100px;"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;@Html.DisplayNameFor(model =&gt; model.Name)&lt;/th&gt;
                  &lt;th&gt;LAN ID&lt;/th&gt;
                  &lt;th&gt;Department&lt;/th&gt;
                  &lt;th&gt;Email&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              @foreach(var x in Model)
              {
                  &lt;tr class="info"&gt;
                      &lt;td&gt;
                          @Html.DisplayFor(modelItem =&gt; x.Name)
                      &lt;/td&gt;
                      &lt;td&gt;
                          @Html.DisplayFor(modelItem =&gt; x.Lan_Id)
                      &lt;/td&gt;
                      &lt;td&gt;
                          @Html.DisplayFor(modelItem =&gt; x.CurrDept)
                      &lt;/td&gt;
                      &lt;td&gt;
                          @Html.DisplayFor(modelItem =&gt; x.Email)
                      &lt;/td&gt;
                  &lt;/tr&gt;
              }
          &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;div class="panel-footer"&gt;&lt;/div&gt;
  </code></pre>