title: Create a fixed div which scrolls horizontally but not vertically
body: <p>I have created html with two parts: fixed div (header) and long table below. I made the header fixed as it is essential to keep the header always on top as the table has many columns. Together when page is scrolled they act like Excel spreadsheet with frozen row - the header stays always on top and the table scrolls under the header. Everything works fine until I resize window. The table scrolls horizontally relative to header but the header do not, and therefore column names on header and columns on the table no longer match. My question is whether it is possible to create a fixed div which scrolls horizontally but not vertically?</p>
  
  <p>Below is my HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
      &lt;title&gt;Text&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="CSS.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="nav_menu"&gt;
              &lt;img id="SctnImage" src="ub.png"&gt;
              &lt;p id="TileFistLine"&gt;Text&lt;/p&gt;
              &lt;p id="TileSecLine"&gt;Text&lt;/p&gt;
  
              &lt;table id="TblHead"&gt;
              &lt;col width="90"&gt;
              &lt;col width="40"&gt;
              &lt;col width="40"&gt;
              &lt;col width="40"&gt;
              &lt;col width="40"&gt;
              &lt;col width="40"&gt;
              &lt;col width="40"&gt;
              &lt;col width="45"&gt;
              &lt;col width="40"&gt;
              &lt;col width="40"&gt;
              &lt;col width="40"&gt;
              &lt;col width="40"&gt;
              &lt;col width="40"&gt;
              &lt;col width="40"&gt;
              &lt;col width="40"&gt;
              &lt;col width="40"&gt;
              &lt;col width="40"&gt;
              &lt;col width="40"&gt;
              &lt;col width="45"&gt;
              &lt;col width="45"&gt;
              &lt;col width="42"&gt;
              &lt;col width="42"&gt;
              &lt;col width="40"&gt;
  
                  &lt;tr&gt;
                      &lt;td rowspan="2" id="C1"&gt;Designation &lt;br&gt; Click to download CAD&lt;/td&gt;
                      &lt;td  rowspan="2" id="C2"&gt;Mass&lt;br&gt; kg/m&lt;/td&gt;
                      &lt;td rowspan="2" id="C3"&gt;Depth&lt;br&gt; h, mm&lt;/td&gt;
                      &lt;td rowspan="2" id="C4"&gt;Width&lt;br&gt; b, mm&lt;/td&gt;
                      &lt;td rowspan="2" id="C5"&gt;Web&lt;br&gt; s, mm&lt;/td&gt; 
                      &lt;td rowspan="2" id="C6"&gt;Flange&lt;br&gt; t, mm&lt;/td&gt;
                      &lt;td rowspan="2" id="C7"&gt;Root Radius&lt;br&gt;  r, mm&lt;/td&gt;
                      &lt;td rowspan="2" id="C8"&gt;Between fillets&lt;br&gt; d, mm&lt;/td&gt;
                      &lt;td colspan="2" id="C9"&gt;Local Buckling Ratios&lt;/td&gt;
                      &lt;td colspan="2" id="C10"&gt;Second Moment of Area&lt;/td&gt;
                      &lt;td colspan="2" id="C11"&gt;Radius of Gyration&lt;/td&gt;
                      &lt;td colspan="2" id="C12"&gt;Elastic Modulus&lt;/td&gt;
                      &lt;td colspan="2" id="C13"&gt;Plastic Modulus&lt;/td&gt;
                      &lt;td rowspan="2" id="C14"&gt;Buckling Param.&lt;br&gt; u&lt;/td&gt;
                      &lt;td rowspan="2" id="C15"&gt;Torsional Index&lt;br&gt;x&lt;/td&gt;
                      &lt;td rowspan="2" id="C15"&gt;Warping Const.&lt;br&gt; H, dm&lt;sup&gt;6&lt;/sup&gt;&lt;/td&gt;
                      &lt;td rowspan="2" id="C16"&gt;Torsional Const.&lt;br&gt; J, cm&lt;sup&gt;4&lt;/sup&gt;&lt;/td&gt;
                      &lt;td rowspan="2"id="C17"&gt;Area&lt;br&gt; A, cm&lt;sup&gt;2&lt;/sup&gt;&lt;/tp&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                      &lt;td id="C11"&gt;b/2t&lt;/td&gt;
                      &lt;td id="C21"&gt;d/s&lt;/td&gt;
                      &lt;td id="C31"&gt;I&lt;sub&gt;x&lt;/sub&gt;, cm&lt;sup&gt;4&lt;/sup&gt;&lt;/td&gt;
                      &lt;td id="C41"&gt;I&lt;sub&gt;y&lt;/sub&gt;, cm&lt;sup&gt;4&lt;/sup&gt;&lt;/td&gt;
                      &lt;td id="C51"&gt;r&lt;sub&gt;x&lt;/sub&gt;, cm&lt;/td&gt;
                      &lt;td id="C61"&gt;r&lt;sub&gt;y&lt;/sub&gt;, cm&lt;/td&gt;
                      &lt;td id="C71"&gt;Z&lt;sub&gt;x&lt;/sub&gt;, cm&lt;sup&gt;3&lt;/sup&gt;&lt;/td&gt;
                      &lt;td id="C81"&gt;Z&lt;sub&gt;y&lt;/sub&gt;, cm&lt;sup&gt;3&lt;/sup&gt;&lt;/td&gt;
                      &lt;td id="C91"&gt;S&lt;sub&gt;x&lt;/sub&gt;, cm&lt;sup&gt;3&lt;/sup&gt;&lt;/td&gt;
                      &lt;td id="C101"S&lt;sub&gt;y&lt;/sub&gt;, cm&lt;sup&gt;3&lt;/sup&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;div id="DataDiv"&gt;
          &lt;table id="DataTable"&gt;
          &lt;col width="90"&gt;
          &lt;col width="40"&gt;
          &lt;col width="40"&gt;
          &lt;col width="40"&gt;
          &lt;col width="40"&gt;
          &lt;col width="40"&gt;
          &lt;col width="40"&gt;
          &lt;col width="45"&gt;
          &lt;col width="40"&gt;
          &lt;col width="40"&gt;
          &lt;col width="40"&gt;
          &lt;col width="40"&gt; 
          &lt;col width="40"&gt;
          &lt;col width="40"&gt;
          &lt;col width="40"&gt;
          &lt;col width="40"&gt;
          &lt;col width="40"&gt;
          &lt;col width="40"&gt;
          &lt;col width="45"&gt;
          &lt;col width="45"&gt;
          &lt;col width="42"&gt;
          &lt;col width="42"&gt;
          &lt;col width="40"&gt;
  
  &lt;?php
          $dbconnection=mysqli_connect("localhost:3306", "root", "root", "sections");
          $myquery="SELECT * FROM sections.ub";
          $queryresults=mysqli_query($dbconnection, $myquery);
          $tableraws=mysqli_num_rows($queryresults); // gets raws number from table
  
          for ($i=1; $i&lt;=$tableraws; $i++) {
              $myrow=mysqli_fetch_row($queryresults);
                  echo "&lt;tr class='DataRows'&gt;";
                  echo "&lt;td class='DesignCell'&gt;&lt;button type='button' class='DownButt'&gt;".$myrow[1]."&lt;/button&gt;&lt;/td&gt;";
                  for ($k=2; $k&lt;=23; $k++){
                      echo '&lt;td&gt;'.$myrow[$k].'&lt;/td&gt;';
                  }
                  echo "&lt;/tr&gt;";
          }
  ?&gt;
  
  &lt;/table&gt;
  
  &lt;div id="tail"&gt;&lt;/div&gt;           
  
  &lt;?php           readfile("bottom_navi.html"); ?&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>And CSS.css:</p>
  
  <pre><code>*{
      font-family:arial;
      font-size:10px;
  }
  
  #DataDiv {
      position: relative;
      top:172px;
      margin-left: -8px;
      margin-right: -8px;
  }
  
  #SctnImage {
      display:inline;
  }
  
  #TileFistLine {
      display: inline;
      font-size: 50px;
      position:absolute;
      top: -20px;
  }
  
  #TileSecLine {
      font-size: 12px;
      position: absolute;
      top: 80px;
      left: 100px;
  }
  
  #TblHead {
      top:120px;
      width:1100px;
      text-align:center;
      font-size: 10px;
      vertical-align: middle;
      border-style: solid;
      border-width: 1px;
      border-collapse: collapse;
      table-layout: fixed;
      background-color:white;
      position: fixed;
      z-index: 1;
  }
  
  #DataTable {
      border-collapse: collapse;
      table-layout: fixed;
      margin: auto;
      width: 1100px;
      text-align:center;
      vertical-align:middle;
      z-index: -1;
  }
  
  #nav_menu{
    width: 1100px;
      height: 175px;
      position:fixed;
      right: 0;
      left: 0;
      margin-right: auto;
      margin-left: auto;
      top:0;
      background-color:white;
      z-index: 1;
      display: inline;
      }
  
  #tail{
      position:relative;
      width:1100px;
      height:40px;
      margin:auto;
      bottom: 0px;
  }
  
  tr, td {
      border-style: solid;
      border-width: 1px;
      border-color: #99FFFF;
  }
  
  .DataRows:hover {
            background-color: #E5F1FB;
          }
  
  .DownButt {
      width:90px;
      height:23px;
      padding: 0 0 0 0;
      margin: 0 0 0 0;
  }
  
  .DesignCell{
      padding: 0 0 0 0;
  }
  
  #Navigation{
      width:1098px;
      height:35px;
      border: 1px solid;
      border-color:#99FFFF;
      position:fixed;
      margin-left:auto;
      margin-right:auto;
      right: 0;
      left: 0;
      bottom:0px;
      background-color:white;
      z-index: 1;
  }
  
  #home_butt{
      position: relative;
      top:3px;
      left:4px;
      height:30px;
      width:90px;
      padding: 0px;
      margin: 0px;
  }
  
  #CountrySelector {
      width: 150px;
      position: relative;
      left: 6px;
      bottom: 7px;
      height: 18px;
  }
  
  #SectSelector {
      width: 150px;
      position: relative;
      left: 6px;
      bottom: 7px;
      height: 18px;
  }
  </code></pre>