title: ASP.net MVC Kendo UI Grid column headers not aligning to table cells
body: <p>Hey all I'm new to Kendo and I'm trying to fix my grid data in its spot and not move when I resize the browsers window. Currently when resizing it lower it starts cutting off the column names and the data below them. This is not the results I want.</p>
  <p>I want to be able to resize it and the &quot;table&quot; grid stay the same size no matter what.</p>
  <p>My .cshtml page code:</p>
  <pre><code>@(Html.Kendo().ToolBar().....
  
  @(Html.Kendo().Grid &lt; Demo.Tool.Web.Core.Entities.BatchItem &gt; ()
      .Name(&quot;batches&quot;)
      .Columns(c =&gt; {
          c.AutoGenerate(false);
          c.Bound(b =&gt; b.Id).Visible(false).HeaderHtmlAttributes(new {
              style = &quot;text-align: center; white-space: nowrap; table-layout: fixed;&quot;
          });
          c.Bound(b =&gt; b.Description).Width(&quot;200&quot;).HeaderHtmlAttributes(new {
              style = &quot;text-align: center; white-space: nowrap; table-layout: fixed;&quot;
          });
          c.Bound(b =&gt; b.PercentageComplete).Width(&quot;200&quot;).HeaderHtmlAttributes(new {
                  style = &quot;text-align: center; white-space: nowrap; table-layout: fixed;&quot;
              })
              /*Percentage Complete*/
              .HtmlAttributes(new {
                  style = &quot;text-align: center; white-space: nowrap; table-layout: fixed;&quot;
              })
              .ClientTemplate(&quot;&lt;div class='not-progress'&gt;&quot; +
                  &quot;&lt;div class='batch-not-progress'&gt;&lt;/div&gt;&quot; +
                  &quot;&lt;span&gt;0%&lt;/span&gt;&quot; +
                  &quot;&lt;/div&gt;&quot; +
                  &quot;&lt;div class='progress batch-progress'&gt;&lt;/div&gt;&quot;)
              .Width(&quot;200&quot;);
          c.Bound(b =&gt; b.SubmissionTime).Format(&quot;{0:MM/dd/yyyy hh:mm:ss}&quot;)
              /*Submission Time*/
              .HeaderHtmlAttributes(new {
                  style = &quot;text-align: center;&quot;
              })
              .HtmlAttributes(new {
                  style = &quot;text-align: center; white-space: nowrap; table-layout: fixed;&quot;
              })
              .Width(&quot;200&quot;);
          c.Bound(b =&gt; b.Status).ClientTemplate(&quot;#= BatchMonitor.getStatusTemplate(Status) #&quot;)
              /*Status*/
              .HeaderHtmlAttributes(new {
                  style = &quot;text-align: center; white-space: nowrap; table-layout: fixed;&quot;
              })
              .Width(&quot;200&quot;);
          c.Bound(b =&gt; b.Rank).Title(&quot;Priority&quot;).ClientTemplate(&quot;&lt;span/&gt;&quot;)
              /*Priority*/
              .HtmlAttributes(new {
                  style = &quot;text-align: center; white-space: nowrap; table-layout: fixed;&quot;
              })
              .HeaderHtmlAttributes(new {
                  style = &quot;text-align: center;&quot;, @class = &quot;batch-monitor-grid-batches-header&quot;
              })
              .Filterable(false)
              .Sortable(false)
              .Width(&quot;200&quot;);
      })
      .HtmlAttributes(new {
          @class = &quot;batch-monitor-grid batch-monitor-detail-grid batch-monitor-grid-batches&quot;
      })
      .ClientDetailTemplateId(&quot;grdBatchMonitorJobTemplate&quot;)
      .AutoBind(false)
      .DataSource(ds =&gt; {
          ds.WebApi()
              .ServerOperation(true)
              .Model(m =&gt; {
                  m.Id(b =&gt; b.Id);
              })
              .Read(r =&gt; r.Url(string.Format(&quot;{0}://{1}/api/v1/jobbatch&quot;, HttpContext.Current.Request.Url.Scheme, HttpContext.Current.Request.Url.Host)).Type(HttpVerbs.Get)).PageSize(10);
      })
      .Events(e =&gt; e.DataBound(&quot;BatchMonitor.onDatabound&quot;)
          .DetailExpand(&quot;BatchMonitor.onDetailViewExpand&quot;)
          .DetailCollapse(&quot;BatchMonitor.onDetailViewCollapse&quot;)
          .Change(&quot;BatchMonitor.onBatchGridChange&quot;))
      .Pageable(p =&gt; p.Refresh(true)
          .PageSizes(new int[] {
              5,
              10,
              25,
              50,
              100
          })
          .Numeric(true))
      .Scrollable(s =&gt; s.Virtual(GridVirtualizationMode.Columns).Height(&quot;auto&quot;))
      .Resizable(r =&gt; r.Columns(true))
      .Sortable(s =&gt; s.SortMode(GridSortMode.SingleColumn))
      .Selectable(s =&gt; s.Mode(GridSelectionMode.Multiple))
      .ColumnMenu(c =&gt; c.Columns(false))
      .Filterable()) 
  &lt;script type = &quot;text/kendo-tmpl&quot; id = &quot;grdBatchMonitorJobTemplate&quot;&gt;
  @(Html.Kendo().Grid &lt; Demo.Tool.Web.Core.Entities.JobItem &gt; ()
      .Name(&quot;grdJobs_#=Id#&quot;)
      .HtmlAttributes(new {
          @class = &quot;batch-monitor-grid batch-monitor-detail-grid batch-monitor-grid-no-alt-row-color&quot;
      })
      .Columns(c =&gt; {
          c.AutoGenerate(false);
          c.Bound(j =&gt; j.Description).Width(&quot;200&quot;).HtmlAttributes(new {
              style = &quot;text-align: center; white-space: nowrap; table-layout: fixed;&quot;
          });
          c.Bound(j =&gt; j.PercentageComplete).ClientTemplate(&quot;&lt;div&gt;&lt;div class='not-progress'&gt;&lt;div class='job-not-progress'&gt;&lt;/div&gt;&lt;span&gt;0%&lt;/span&gt;&lt;/div&gt;&lt;div class='progress job-progress'&gt;&lt;/div&gt;&lt;/div&gt;&quot;)
              .Width(&quot;200&quot;)
              .HtmlAttributes(new {
                  style = &quot;text-align: center; white-space: nowrap; table-layout: fixed;&quot;
              });
          c.Bound(j =&gt; j.Id).Width(&quot;200&quot;).ClientTemplate(&quot;&lt;span&gt;&lt;/span&gt;&quot;);
          c.Bound(j =&gt; j.Status).Width(&quot;200&quot;).ClientTemplate(&quot;\\#= BatchMonitor.getStatusTemplate(Status)\\#&quot;).HtmlAttributes(new {
              style = &quot;text-align: center; white-space: nowrap; table-layout: fixed;&quot;
          });
          c.Bound(j =&gt; j.Rank).Width(&quot;200&quot;).HtmlAttributes(new {
              style = &quot;text-align: center; white-space: nowrap; table-layout: fixed;&quot;
          });
      })
      .Events(e =&gt; e.DataBound(&quot;BatchMonitor.onJobGridDatabound&quot;)
          .Change(&quot;BatchMonitor.onJobGridChange&quot;)
          .DetailCollapse(&quot;BatchMonitor.onJobGridDetailViewCollapse&quot;)
          .DetailExpand(&quot;BatchMonitor.onJobGridDetailViewExpand&quot;))
      .ClientDetailTemplateId(&quot;grdBatchMonitorActionTemplate&quot;)
      .DataSource(ds =&gt; ds.WebApi().Read(r =&gt; r.Url(string.Format(&quot;{0}://{1}/api/v1/jobbatch/jobs/#=Id#&quot;,
              HttpContext.Current.Request.Url.Scheme, HttpContext.Current.Request.Url.Host)))
          .PageSize(10))
      .Selectable(s =&gt; s.Mode(GridSelectionMode.Multiple))
      .ToClientTemplate())
  &lt;/script&gt;
  &lt;script type = &quot;text/kendo-tmpl&quot; id = &quot;grdBatchMonitorActionTemplate&quot;&gt;
  @(Html.Kendo().Grid &lt; Demo.Tool.Web.Core.Entities.ActionItem &gt; ()
      .Name(&quot;grdAction_#=Id#&quot;)
      .HtmlAttributes(new {
          @class = &quot;batch-monitor-grid batch-monitor-grid-no-alt-row-color&quot;
      })
      .Columns(c =&gt; {
          c.Bound(a =&gt; a.Description).Width(&quot;200&quot;);
          c.Bound(a =&gt; a.PercentageComplete).ClientTemplate(&quot;&lt;div class='not-progress'&gt;&lt;div class='action-not-progress'&gt;&lt;/div&gt;&lt;span&gt;0%&lt;/span&gt;&lt;/div&gt;&lt;div class='progress action-progress'&gt;&lt;/div&gt;&quot;).Width(&quot;100&quot;)
              .Width(&quot;200&quot;)
              .HtmlAttributes(new {
                  style = &quot;text-align: center;&quot;
              });
          c.Bound(a =&gt; a.Id).Width(&quot;200&quot;).ClientTemplate(&quot;&lt;span&gt;&lt;/span&gt;&quot;);
          c.Bound(a =&gt; a.Status).Width(&quot;200&quot;).ClientTemplate(&quot;\\#= BatchMonitor.getStatusTemplate(Status) \\#&quot;);
          c.Bound(a =&gt; a.ParentId).Width(&quot;200&quot;).ClientTemplate(&quot;&lt;span/&gt;&quot;);
      })
      .Events(e =&gt; e.DataBound(&quot;BatchMonitor.onActionGridDatabound&quot;)
          .Change(&quot;BatchMonitor.onJobGridChange&quot;))
      .DataSource(ds =&gt; ds.WebApi()
          .Read(r =&gt; r.Url(string.Format(&quot;{0}://{1}/api/v1/jobbatch/actions/#=Id#&quot;,
              HttpContext.Current.Request.Url.Scheme, HttpContext.Current.Request.Url.Host))).PageSize(10))
      .ToClientTemplate()) 
  &lt;/script&gt;
  </code></pre>
  <p>This is what the code above produces:</p>
  <p><a href="https://i.stack.imgur.com/gy0K6.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gy0K6.gif" alt="enter image description here" /></a></p>
  <p>Now, oddly enough, if I manually size one of the column headers and then resize it seems to work just fine?</p>
  <p><a href="https://i.stack.imgur.com/P5pjx.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P5pjx.gif" alt="enter image description here" /></a></p>
  <p>Am I missing a setting somewhere in order to correct this behavior?</p>