title: Bootstrap w. Kendo UI - Responsive Tables
body: <p>I am using Bootstrap with Kendo UI. I'm looking to create a responsive table.</p>
  
  <p>Bootstraps documentation says to just wrap <strong>.table</strong> with a <strong>.table-responsive</strong> class.</p>
  
  <blockquote>
    <p>Create responsive tables by wrapping any .table in .table-responsive
    to make them scroll horizontally on small devices (under 768px). When
    viewing on anything larger than 768px wide, you will not see any
    difference in these tables.</p>
  </blockquote>
  
  <p><a href="http://getbootstrap.com/css/#tables" rel="nofollow noreferrer">Source:  Bootstrap Documentation</a></p>
  
  <p>Unfortunately, this does not seem to work when using Kendo UI's grid.</p>
  
  <p>In the following example, I apply the <strong>.table</strong> class to my Kendo grid, and wrap it with the <strong>.table-responsive</strong> class as per documentation. </p>
  
  <p>Long story short, my table is not responsive. The container appears to be, but does not scroll horizontally. Does anyone know a work around for this?</p>
  
  <p><img src="https://i.stack.imgur.com/lEpc7.png" alt="enter image description here"></p>
  
  <p>My Code:</p>
  
  <pre><code> &lt;div class="col-md-10 col-md-offset-1 table-responsive"&gt;
   @(Html.Kendo().Grid&lt;HolsteinWebsite_Herdbook.Models.MainAwardsModel&gt;()
                              .Name("TopClassifyingCows_ReportGrid")
                              .Columns(columns =&gt;
                              {
                                  columns.Bound(c =&gt; c.tccGrid.animalName);
                                  columns.Bound(c =&gt; c.tccGrid.classValue).Width(80);
                                  columns.Bound(c =&gt; c.tccGrid.score).Width(80);
                                  columns.Bound(c =&gt; c.tccGrid.sireName);
                                  columns.Bound(c =&gt; c.tccGrid.owners);
                              })
                              .Scrollable()
                              .Sortable()
                              .Pageable(pageable =&gt; pageable
                                  .Refresh(true)
                                  .PageSizes(true)
                                  .ButtonCount(5))
                              .DataSource(dataSource =&gt; dataSource
                                  .Ajax()
                                  .Read(read =&gt; read.Action("Customers_Read", "Grid"))
                              )
                              .HtmlAttributes(new { @class = "table" })
                  )
    &lt;/div&gt;
  </code></pre>
  
  <p>Generated Code:</p>
  
  <pre><code> ...
   &lt;table class="table" role="grid"&gt;
              &lt;colgroup&gt;
                 &lt;col&gt;
                 &lt;col style="width:80px"&gt;
                 &lt;col style="width:80px"&gt;
                 &lt;col&gt;
                 &lt;col&gt;
              &lt;/colgroup&gt;
              &lt;tbody&gt;
                 &lt;tr class="k-no-data"&gt;
                    &lt;td colspan="5"&gt;&lt;/td&gt;
                 &lt;/tr&gt;
              &lt;/tbody&gt;
           &lt;/table&gt;
            ...
  </code></pre>