title: keep table headers still when scrolling a table?
body: <p>I have the following table which inside a model dialog and I have applied some css to, so that the head stays in the same position when its being scrolled.</p>
  
  <p>however after I load the page the columns are pushed to the left, these 5 columns should appear under the headers.</p>
  
  <p>also the underlying page has been pushed to the left of the page also.</p>
  
  <pre><code>               &lt;style&gt;
                      .tblSearchMedia1 tbody {
                      height: 100px;
                      overflow: auto;
                          }
                      .tblSearchMedia1 td {
                      padding: 3px 10px;
                      }
  
                      .tblSearchMedia1 thead &gt; tr, tbody{
                      display:block;
  
                      }
                  &lt;/style&gt;
  
  
                  &lt;table class="tblSearchMedia1"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt; Region &lt;/th&gt;
                          &lt;th&gt; Subregion &lt;/th&gt;
                          &lt;th&gt; Country &lt;/th&gt;
                          &lt;th&gt; Media Type &lt;/th&gt;
                          &lt;th&gt; Media Name &lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody data-bind="foreach: MediaGroups"&gt;
                      &lt;tr&gt;
                          &lt;td data-bind="text: ID"&gt;&lt;/td&gt;
                          &lt;td data-bind="text: ID"&gt;&lt;/td&gt;
                          &lt;td data-bind="text:ID"&gt;&lt;/td&gt;
                          &lt;td data-bind="text: ID"&gt;&lt;/td&gt;
                          &lt;td data-bind="text: ID"&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/meMba.png" alt="enter image description here">               </p>
  
  <p><a href="http://postimg.org/image/av71kh86b/full/" rel="nofollow noreferrer">Link to Larger image</a></p>